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:
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:
- A database of 'tiles' which are rendered (usually in 256x256 pixel sections) side by side to make the map.
- 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:
- Download the OSM database and generate the tiles yourself.
- 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.
