Jan 192015

Other posts in this blog have already covered the procedure to add an interactive map to a web page either using the Google Maps API or else the HERE Maps API.

Leaflet is an open source alternative equally valid to put a map on a page. The Leaflet API allows adding our own information layers to the map, customize the design, and adapt the map to our requirements in other ways.

This post provides an introduction to the main characteristics and functionality of Leaflet.

1. Loading the library in the page.

In this post we will be writing a sample page “leaflet-sample.html”. The first step is adding to the <head> section of the page the references to the javascript file that contains the library, and the associated CSS stylesheet. The files are available from the leaflet CDN:

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

2. Inserting the map container element

Next, insert in the <body> section a <div> element that will be the container of the map:

    <div id="divmap"></div>

The height of the map container must be specified. The most common way to do this is by means of a CSS rule. For instance:

#divmap { height: 200px; }

3. Initializing the map

Finally, the actual map is created inside the map container element with a  call to the leaflet function L.map(). The simplest map specification includes the (lat,lon) coordinates of the center point, and the initial scale:

    var map = L.map('divmap').setView([51.505, -0.09], 13);

4. Associating a map provider

Leaflet is a library that can be used to instantiate and manipulate a map, but the images that compose the map are not provided by leaflet itself. Instead, we must associate a map provider to the javascript object created by leaflet. There are several map providers that can be used with leaflet. For instance, to associate the OpenstreetMap tile server, a call to L.tileLayer can be added to our script as follows:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> ' +
                 'contributors, ' +
                 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18

And the resulting map looks like this:

5. Other map providers

Leaflet can work with maps from a large number of map providers. Among the most common are:

  • openStreetMap – OSM map servers are free, but their usage policy prohibits heavy use of them. Several alternative maps servers (some free, some paid) are recommended (MapQuest, CartoDB,…).
  • openCycleMap – openCycleMap offers a free map service. Their usage policy asks the users that expect to be making a heavy use of the servers to get in touch with them to agree a service plan to contribute with the maintenance costs.
  • mapQuest – mapQuest offers two types of map servers: mapQuest-Osm and mapQuest-Aerial. The usage is free. In the page that describes the mapQuest service, they ask users that expect an usage above 4000 requests per second to get in touch with them.
  • mapbox – To use mapBox a key  (mapID) has to be obtained. The servicee is free up to  3000 mapViews per month (1 mapView = 15 tiles). For larger volumes, several service plans can be contracted, from Basic (5$/month, 10,000 mapViews/month) up to Premium (499$/month, 1,000,000 mapViews/month)
  • cloudmade – Cloudmade only offers a paid service, for enterprise users of medium to large size. Pricing starts at  $1,500/month for 50 million transactions.

There is a javascript class TileLayer.Common.js available at github.com, that simplifies the use of these map providers.


 Posted by at 6:28 pm

 Leave a Reply