Chapter 10: Web Applications

10.2 Leaflet Web Maps

Leaflet is an open-source project that provides a lightweight set of mapping tools that rely more on the browser and less on the server to compose maps. It relies heavily on JavaScript, and will probably remind you of jQuery in how it goes about constructing maps and modifying their characteristics.

Getting Started with Leaflet
Exercises

Getting Started with Leaflet

Read the Leaflet Quick Start Guide. The guide uses the Mapbox system (the company that created Leaflet), which requires that you have one of their API keys and, more recently, a project (which is an attempt to guide you into using their system). If you don’t want to create an account with them, there are a number of other sources of map tiles you can use. A good one for testing is provided by OpenStreetMap, but it’s not ideal for major use because of their limited resources. Its format is:

var mapOSM = L.map('mapOSM').setView([42.3676145,-72.505491], 12);
L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{
  attribution: '© &lt;a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  maxZoom: 18
}).addTo(mapOSM);

You can also pull topographic map tiles from the US National Map:

var mapUSGS = L.map('mapUSGS').setView([42.3676145,-72.505491], 12);
L.tileLayer.wms( 'http://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WMSServer',
{
    layers: 0,
    attribution: '&lt;a href="http://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer">USGS</a>',
    maxZoom: 19
}).addTo(mapUSGS);

And even imagery from ArcGIS Online:

var mapESRI = L.map('mapESRI').setView([42.3676145,-72.505491], 12);
L.tileLayer( 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
    attribution: '© &lt;a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
    maxZoom: 18
}).addTo(mapESRI);

Mapbox	OpenStreetMap	USGS Topo	ESRI Imagery

The Guide to Leaflet on Mobile is also really useful, and potentially the other tutorials are, as well (all of them short). Once you’re familiar with Leaflet, you may routinely go to the API reference to find existing functions for what you wish to achieve. And if a feature isn’t there, you should check out the large set of plug-ins that extend its capabilities even further.

Exercises

Based on the examples in the tutorial, put together a map of the local Amherst area.