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.
Which rendered in a browser produces this:
Lessons LearnedFrom 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.
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).
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.
var map = L.map('map').setView([38.8605579, -77.1166921], 15);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:
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">',
- Sequence of available subdomains for the CDN. Set to '1234' in this case.
- The longitude.
- The latitude.
- The zoom level.
maxZoom settings. Changing the zoom level to 18 and setting maxZoom to 19, the map looked like this:
+ 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.