Line by Line: leaflet.js

Introduction

Leaflet.js is a JavaScript library for creating maps.
JS classes are functions.

Example:

function Person() {
            this.firstName = "unknown";
            this.lastName = "unknown";
            this.getFullName = function(){
                return this.firstName + " " + this.lastName;
            }
        };

var person1 = new Person();
person1.firstName = "Steve";
person1.lastName = "Jobs";

Up and running

1. Declare var mapData which is a an object literal with the center key and zoom key. The values of which are the longitutde and latitutde and an integer representing the zoom level. Increasing numbers mean increased zoom level

var mapData = {
   center: [35.083498, -106.651960],
   zoom: 16
}

1. Use the map class of leaflet to create a map on a page Instantiate a new map by calling on the map class which takes 2 arguments: the DIV id wherein the map will be placed within the object literal

var map = new L.map('map', mapData);

1. Display the tile layers on the map using the TileLayers class Wikipedia A tiled web map, slippy map1 or tile map (raster or vector) is a map displayed in a browser by seamlessly joining dozens of individually requested image files over the internet. The Tilelayer class takes as an argument the tilelayer from the specified provider (openstreetmap)

var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');