Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

NACIS 2012 Workshop

1,426 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

NACIS 2012 Workshop

  1. 1. Powerful Mapping WebApplications with Open Source Tools Wm Leler - Flightstats, Inc. Mele Sax-Barnett & Grant Humphries - TriMet
  2. 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. 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. 4. Directory structure• workshop/ • ex*.html and ex*.js • img/ • jquery-1.8.2.js • Leaflet/
  5. 5. Maps in 3 Movements Map Maps, Imagery Geography Data OSM & Info & RoutesServer Map Tiles, Geom, etc. • User controls Client JavaScript Map API • Loads Map TilesBrowser • Markers and annotations
  6. 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. 7. Rendering Map DataMap Data: roads, boundaries, names, ... Styles: colors,Zoom Render line widths,levels fonts, Tile hill shading, visibility, detail, ... Map Tiles to Serve
  8. 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. 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. 10. Zoom level 1 has 4 tiles number of tiles zoom = 4 1 4 =4
  11. 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. 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. 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. 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. 15. Ex 2• Move JavaScript into a separate file• Pattern to isolate namespace• jQuery • $(document).ready() • instead of “onload”• L.latLng location
  16. 16. Ex 3• Overlay layer • Composite weather radar data from NEXRAD (National Weather Service) • Iowa State server • WMS (Web Map Server)
  17. 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. 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. 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. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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)
  25. 25. Map Server URLsEasy to determine URL using browser debugger Google Maps Browser debugger
  26. 26. Constructing Tile URL Templateshttp://mt1.google.com/vt/lyrs=m@174227760&hl=en& src=app&x=81&y=183&z=9&s=Ga subdomain column row zoomL.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 })
  27. 27. Slippy Maps• “slippy” naming convention for map tiles:http://otile1.mqcdn.com/tiles/1.0.0/osm/4/63/99.pnghttp://<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
  28. 28. Bing• Bing tiles use a different naming scheme, based on quadtrees.• There’s a Leaflet plugin for that!• https://gist.github.com/1221998
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. Ex 6• AJAX call to get data • Get airplane positions• Add markers and popups • L.marker
  33. 33. Ex 7• Replace marker with Geometry (circle) • L.circleMarker• Handle both departing and arriving flights
  34. 34. Ex 8• Add airport control tower• Add image icon to a marker • img/tower.png • L.icon class
  35. 35. Ex 9• Create a custom image for a marker• airplane icons• Use divIcon class • L.divIcon• Add rotate method to Marker class
  36. 36. 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
  37. 37. 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
  38. 38. Plug-ins• http://leaflet.cloudmade.com/plugins.html• https://github.com/shramov/leaflet-plugins • Rotate markers! • (reinventing the wheel)
  39. 39. 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
  40. 40. 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
  41. 41. Part 2• Open Street Map and QGIS• Mele and Grant

×