LeafletJS - Getting Started

Leaflet.js is an open-source library using which we can deploy simple, interactive, lightweight web maps.
Leaflet JavaScript library allows you to use layers such as Tile layers, WMS, Markers, Popups, Vector layers (polylines, polygons, circles, etc.), Image overlays and GeoJSON.
Leaflet JavaScript library allows you to use layers such as Tile layers, WMS, Markers, Popups, Vector layers (polylines, polygons, circles, etc.), Image overlays and GeoJSON.
You can interact with the Leaflet maps by dragging the map, zooming (by double click or, wheel scroll), using keyboard, using event handling, and by dragging the markers.
You can interact with the Leaflet maps by dragging the map, zooming (by double click or, wheel scroll), using keyboard, using event handling, and by dragging the markers.
Leaflet supports browsers such as Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11 on desktop and, browsers like Safari, Android, Chrome, Firefox for mobiles.
Leaflet supports browsers such as Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11 on desktop and, browsers like Safari, Android, Chrome, Firefox for mobiles.
Follow the steps given below to load a map on your webpage −
Create a basic HTML page with head and body tags as shown below −
<!DOCTYPE html>
<html>
   <head>
   </head>
   
   <body>
      ...........
   </body>
</html>

Include the Leaflet CSS script in the example −
<head>
   <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>

Load or include the Leaflet API using the script tag −
<head>
   <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>

To hold the map, we have to create a container element. Generally, the <div> tag (a generic container) is used for this purpose.
Create a container element and define its dimensions −
<div id = "sample" style = "width:900px; height:580px;"></div>

Leaflet provides several options such as types Control options, Interaction Options, Map State Options, Animation Options, etc. By setting values to these, we can customize the map as desired.
Create a mapOptions object (it is created just like a literal) and set values for the options center and zoom, where
center − As a value to this option, you need to pass a LatLng object specifying the location where we want to center the map. (Just specify the latitude and longitude values within [] braces)
center − As a value to this option, you need to pass a LatLng object specifying the location where we want to center the map. (Just specify the latitude and longitude values within [] braces)
zoom − As a value to this option, you need to pass an integer representing the zoom level of the map, as shown below.
zoom − As a value to this option, you need to pass an integer representing the zoom level of the map, as shown below.
var mapOptions = {
   center: [17.385044, 78.486671],
   zoom: 10
}

Using the Map class of leaflet API, you can create a map on a page. You can create a map object by instantiating the called Map of the Leaflet API. While instantiating this class, you need to pass two parameters −
As a parameter to this option, you need to pass a String variable representing the DOM id or an instance of the <div> element. Here, the <div>element is an HTML container to hold the map.
As a parameter to this option, you need to pass a String variable representing the DOM id or an instance of the <div> element. Here, the <div>element is an HTML container to hold the map.
An optional object literal with map options.
An optional object literal with map options.
Create a Map object by passing the id of the <div> element and mapOptions object created in the previous step.
var map = new L.map('map', mapOptions);

You can load and display various types of maps (tile layers) by instantiating the TileLayer class. While instantiating it you need to pass an URL template requesting the desired tile layer(map) from the service provider, in the form of a String variable.
Create the tile layer object as shown below.
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

Here we have used the openstreetmap.
Finally add the layer created in the previous step to the map object using the addlayer() method as shown below.
map.addLayer(layer);

The following example shows how to load an open street map of Hyderabad city with a zoom value of 10.
<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
      </script>
   </body>
   
</html>
It generates the following output −
Just like open street map, you can load the layers of various service providers such as Open Topo, Thunder forest, Hydda, ESRI, Open weather, NASA GIBS, etc. To do so, you need to pass their respective URL while creating the TileLayer object
var layer = new L.TileLayer('URL of the required map');

The following table lists the URL’s and their respective sample maps of the layers provided by Openstreetmap.
http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png
http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/ {y}.png
http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png
http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png
 Print
 Add Notes
 Bookmark this page