Workshop on building mapping web apps in JavaScript using Leaflet at the 2012 NACIS conference in Portland, OR

1. Powerful Mapping Web
Applications with Open
Source Tools
Wm Leler - Flightstats, Inc.
Mele Sax-Barnett &
Grant Humphries - TriMet

2. Part 1 - Leaflet
• Build an online map webapp
• We will be using Leaflet, but most things
would be similar using OpenLayers, Modest
Maps, Polymaps, Google Maps API, Bing,
Nokia, etc.

3. Files
• http://demo.flightstats-ops.com/NACIS/
• requirements.html
• workshop.zip (exercise source + jQuery)
• talk/ (these slides)
• Unzip workshop.zip and put Leaflet in the
same directory

4. Directory structure
• workshop/
• ex*.html and ex*.js
• img/
• jquery-1.8.2.js
• Leaflet/

5. Maps in 3 Movements
Map Maps, Imagery Geography
Data OSM & Info & Routes
Server Map Tiles, Geom, etc.
• User controls
Client
JavaScript Map API
• Loads Map Tiles
Browser • Markers and
annotations

6. Sources of Map Data
• Not free: Navteq, Navinfo, DigitalGlobe,
SRTM, Planetary Visions, Google
• OpenStreetMap, US Census TIGER
• NASA/JPL, US Dept. of Agriculture
• Natural Earth, CGIAR-CSI
• any geographic source
• anyone with a GPS unit

7. Rendering Map Data
Map Data: roads, boundaries, names, ...
Styles:
colors,
Zoom
Render line widths,
levels
fonts,
Tile hill shading,
visibility,
detail, ...
Map Tiles to Serve

8. Map Tiles
• Instead of downloading entire map into
the browser, slice up into pieces
• Enables interactivity, smooth scrolling
• uses AJAX calls to download tiles
• lowers resource needs for browser and
server, lowers bandwidth demands

9. The Tao of Tiles
• Longitude (x) goes
from -180º to 180º
• Latitude (y) goes from
85.051º to -85.051º
(arctan sinh π), not 90º
• Tile is 256 x 256 pixels
• Zoom level 0 has one
tile for entire world

10. Zoom level 1 has 4 tiles
number of tiles
zoom
= 4
1
4 =4

11. Tile Explosion
• City level (11) = 4,194,304 tiles
• Street level (16) =
4,294,967,296 tiles
• Google maps goes
to level 22 =
> 17 trillion tiles

12. Subdomains
• Browsers used to be limited to 2 network
connections per domain. (Recent browsers
raised limit as high as 6.)
• To get around this limitation, map servers
generally point multiple (3 or 4) subdomains
at a single tile server.
http://mt0.google.com/
http://mt1.google.com/
http://mt2.google.com/
http://mt3.google.com/

13. Tile Alternatives
(side note)
• Google’s experimental MapsGL uses
WebGL to draw streets, buildings, and
other features directly in a canvas
• Polymaps uses SVG
• GeoJSON draws geography directly
• Renders in browser instead of using tiles
• Bad for satellite or other imagery
• Doesn’t work on all browsers

14. Ex 1
• Very simple map using Leaflet
• JavaScript and CSS
• Uses MapQuest Open tile server
• Map data from OSM
• No jQuery (yet)
• Chaining of Leaflet commands

15. Ex 2
• Move JavaScript into a separate file
• Pattern to isolate namespace
• jQuery
• $(document).ready()
• instead of “onload”
• L.latLng location

16. Ex 3
• Overlay layer
• Composite weather radar data from
NEXRAD (National Weather Service)
• Iowa State server
• WMS (Web Map Server)

17. MapQuest Open
• http://developer.mapquest.com/web/
products/open/map
• OpenStreetMap, aerial, and overlay tiles
• Free!
• Supports high bandwidth on request
• Reliability is not guaranteed

18. Mapquest Open Tiles
• Leaflet templates (subdomains: 1 2 3 4):
http://otile{s}.mqcdn.com/tiles/
1.0.0/osm/{z}/{x}/{y}.jpg
http://oatile{s}.mqcdn.com/tiles/
1.0.0/sat/{z}/{x}/{y}.jpg
http://otile{s}.mqcdn.com/tiles/
1.0.0/hyb/{z}/{x}/{y}.png

19. Make Your Own Maps
• Lots of Open Source Software for creating
maps
• CloudMade
• http://cloudmade.com/products/style-
editor/gallery
• Mapbox
• http://mapbox.com/tilemill/gallery/

20. CloudMade
• Has a large number of maps, or
• Map Studio allows you to create your own
map styles
• Based on OSM data
• CloudMade will host your map tiles ($)
• or you can download and host yourself
• CloudMade also created Leaflet API

22. MapBox
• TileMill allows you to create maps, using
any data
• not just styles
• MapBox will host your tiles ($)
• or you can download and host yourself
• They have created a large number of maps
• Can dynamically modify tiles

23. Ex 4
• Map options
• Layers, Scale, Attribution controls
• override Attribution control
• Two basemaps: street and satellite
• MapQuest Open
• Two overlays: weather radar and streets
• Iowa and MapQuest Open

24. Tile Servers
• Lots of tile servers out there
• Raw tile servers (like MapQuest, Google)
• http://demo.flightstats-ops.com/maps
• WMS (Like Iowa weather)
• http://trac.osgeo.org/openlayers/wiki/
AvailableWMSServices
• Many more

25. Someone Else’s Server
• Almost all map tile servers are unsecured
• You are identified by the referrer header
• Can be OK for low volume use
• No reliability guarantees
• Just need to determine server URL
• (except for Microsoft Bing maps)

26. Map Server URLs
Easy to determine URL using browser debugger
Google Maps
Browser
debugger

27. Constructing
Tile URL Templates
http://mt1.google.com/vt/lyrs=m@174227760&hl=en&
src=app&x=81&y=183&z=9&s=Ga
subdomain
column row zoom
L.tileLayer(
'http://mt{s}.google.com/vt/lyrs=m@174227760&hl=en&
src=app&x={x}&y={y}&z={z}&s=Ga',
{ subdomains:'0123', attribution:'© Google' })

28. Slippy Maps
• “slippy” naming convention for map tiles:
http://otile1.mqcdn.com/tiles/1.0.0/osm/4/63/99.png
http://<sub>.domain.com/.../<zoom>/<x>/<y>.<format>
http://otile{s}.mqcdn.com/tiles/1.0.0/osm/
{z}/{x}/{y}.png
• Tiles can be served as normal files
No need for a special tile server

29. Bing
• Bing tiles use a different naming scheme,
based on quadtrees.
• There’s a Leaflet plugin for that!
• https://gist.github.com/1221998

30. Ex 5
• Exercise:
• Add a new base map
• Add an overlay
• Use http://demo.flightstats-ops.com/maps
or any other map (with raw tile server)
• Use the debugger to figure out URL
template

31. Adding a Data Source
• We are going to request real-time airplane
positions from the Flightstats data API
• appId = ‘ebc6552f’; appKey = ‘NACIS’
• https://developer.flightstats.com/api-docs/
flightstatus/v2/airport
• Airport tracks (departures)
• Live documentation

32. AJAX
• jQuery makes it very easy to make an
AJAX call to a remote API
• We are using the JSONP protocol and data
format
• Show position of each airplane with a
marker and a popup

33. Ex 6
• AJAX call to get data
• Get airplane positions
• Add markers and popups
• L.marker

34. Ex 7
• Replace marker with Geometry (circle)
• L.circleMarker
• Handle both departing and arriving flights

35. Ex 8
• Add airport control tower
• Add image icon to a marker
• img/tower.png
• L.icon class

36. Ex 9
• Create a custom image for a marker
• airplane icons
• Use divIcon class
• L.divIcon
• Add rotate method to Marker class

37. Custom Layers
• You can define custom map layers
• Define methods:
• initialize, onAdd, onRemove
• call private update_ method on scroll
• turn off zoom animation
• L.Class.extend

38. Ex 10
• Create custom layers for airplanes and
airport
• Extend L.Class
• You lose some functionality of L.marker,
but you can add it back

39. Plug-ins
• http://leaflet.cloudmade.com/plugins.html
• https://github.com/shramov/leaflet-plugins
• Rotate markers!
• (reinventing the wheel)

40. Libraries
• Link to minified jQuery library
• See http://jquery.com/download/
• Link to minified Leaflet library
• See http://leaflet.cloudmade.com/
download.html
• Versions on a popular CDN will be faster

41. Ex 11
CDN (Content Delivery Network)
1. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
2. <!--[if lte IE 8]>
3. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" />
4. <![endif]-->
5. <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
jQuery also on Google and Microsoft CDNs

42. Part 2
• Open Street Map and QGIS
• Mele and Grant