Learning Leaflet 1

Leaflet is a free software JavaScript library for creating web mapping applications.  Since the Photovoltaic Viability Map project uses it, it's time I learned how to use it as well.

Using the following three resources:

• Leaflet Quick Start Guide from the Leaflet website.
• Getting started with Leaflet tutorial from the  SWITCH2OSM website.
• The sunlight.coffee script from the pv-viability-map.

I created a web page with a map displaying the area around where I live:

Which rendered in a browser produces this:

Lessons Learned

From The Basics page on the SWITCH2OSM site, I learned that there are two components to a web based map application:

1. A database of 'tiles' which are rendered (usually in 256x256 pixel sections) side by side to make the map.
2. A JavaScript API for viewing the database tiles.

While the OpenStreetMap (OSM) tiles are open data, and are thus free to use, the serving of them is not. Given the cost of maintaining and serving 46 gigabytes of data to the whole world, this is understandable, but I never thought about it before. OSM has a usage policy for their tile servers, which also suggests alternative tile servers for their tiles.

So to setup a web map application that uses OSM tiles, one has two choices:

1. Download the OSM database and generate the tiles yourself.
2. Use a third-party supplier (some charge, some don't).

The German company Geofabrik hosts the OSM database separated by regions, countries and states (within the US) in North America here. So instead of the 46 gigabytes of the entire OSM database, I could get just the 211 megabytes for the state of Virginia here.

A content delivery network (CDN) is a distributed system of servers across the Internet for the purpose of rapid delivery of content.  The quick start guide on the leaflet site uses the Cloudfare CDN to serve leaflet. The pv-viability-map uses MapQuest's CDN as a tile server.  For my first leaflet map, I used both of these together.

This is JavaScript that (using leaflet) does the work of rendering the map:

var map = L.map('map').setView([38.8605579, -77.1166921], 15);

L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg', {
    attribution: 'Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency. Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">',
    maxZoom: 18,
    subdomains: '1234'
}).addTo(map);

The tileLayer method does the job retrieving and rendering the tiles selected by the setView method on the Map object.  The string substitution variables s, x, y, and z contain:

s

Sequence of available subdomains for the CDN. Set to '1234' in this case.

x

The longitude.

y

The latitude.

z

The zoom level.

In this source listing I changed what had been 'sat' in the url to 'map' (colored green in the source listing for identification), which changed the rendered map to:

 I experimented with the zoom level and maxZoom settings.  Changing the zoom level to 18 and setting maxZoom to 19, the map looked like this:

and allowed the + button to be clicked once, after which it became grayed out.  The highest usable zoom level seems to be 19 anyway, since when I tried 20 the map became solid gray. A zoom level of 1 shows the map of the entire planet.