Getting started with leaflet

Remarks#

Leaflet is an open-source JavaScript library for creating interactive maps.

Versions#

Version	Release Date
1.0.3	2017-01-23
1.0.2	2016-11-21
1.0.1	2016-09-30
1.0	2016-09-27
0.7	2013-11-18
0.6	2013-06-26
0.5	2013-01-17
0.4	2012-07-30
0.3	2012-02-13
0.2	2011-06-17
0.1	2011-05-16

Implementing Leaflet.js with HTML and JavaScript

To use Leaflet, load its stylesheet and JavaScript file to your page:

<link rel="stylesheet" href="/css/leaflet.css" />
<script src="/js/leaflet.js"></script>

These resources can be downloaded from a variety of locations such as Leaflet’s homepage or the Leaflet Github repository, or you can directly use CDN as,

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>

You need a container for your map. It is common for developers to use a div with an id of “map” for this. Make sure to give your map div a height as well or the map might not show up.

<div id="map" style="height: 200px;"></div>

Initializing the map is done by creating a map object using the Leaflet.map(mapContainerId) method. In the below example, a latitude and longitude are set as a default with a default zoom level of 13.

var map = L.map('map').setView([42.35, -71.08], 13);

This creates our empty map, we should now provide a tile layer to act as our base map. A tilelayer is a service that provides map images in tiles, small images that are accessed by x, y and z parameters in a particular order (see below).

A tile layer URL might look like this, where {s}, {z}, {x} and {y} are placeholders that Leaflet will automatically change during operation:

"https://{s}.domain.com/foo/{z}/{x}/{y}.png"

We can now add our tilelayer, along with attribution info and maximum possible zoom level, and add it to the map:

L.tileLayer('https://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
  attribution: 'Tiles by <a href="https://mapc.org">MAPC</a>, Data by <a href="https://mass.gov/mgis">MassGIS</a>',
  maxZoom: 17,
  minZoom: 5
}).addTo(map);

Note: Map initialization and loading the tile layer need to occur after the inclusion of leaflet.js and the map container div element.

Leaflet Quick Start

<!DOCTYPE html>
<html>

  <head>
    <title>My Leaflet Map</title>
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <style type="text/css">
      #map { 
        height: 500px; 
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script src="//unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>    
    <script>
      var map = L.map('map').setView([51.505, -0.09], 13);

      L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      
      L.marker([51.5, -0.09]).addTo(map)
          .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
          .openPopup();
    </script>
  </body>

</html>