DEV Community

Kauress
Kauress

Posted on

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";



Enter fullscreen mode Exit fullscreen mode

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
}


Enter fullscreen mode Exit fullscreen mode
  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);


Enter fullscreen mode Exit fullscreen mode
  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');


Enter fullscreen mode Exit fullscreen mode

Discussion (0)