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.

Mapping with Open Source Tools, part 1


Published on

Using Leaflet to draw interactive web maps.

Published in: Education, Technology, Business
  • Be the first to comment

Mapping with Open Source Tools, part 1

  1. 1. Powerful Mapping WebApplications with OpenSource ToolsWm Leler - Flightstats, Inc.Mele Sax-Barnett - Urban AirshipGrant Humphries - TriMet
  2. 2. Part 1 - Leaflet• Build an online map web application• We will be using Leaflet, but most thingswould be similar using OpenLayers, ModestMaps, Polymaps, Google Maps API, etc.
  3. 3. Files (exercises, jQuery, Leaflet)slides/ (these slides)• Unzip onto your computer
  4. 4. Your directoryworkshop/ex*.html and ex*.jsimg/jquery-1.9.1.jsLeaflet/
  5. 5. Maps in 3 MovementsClientBrowserServerJavaScript Map APIMap Tiles, Geom, etc.Maps,OSMMapData• User controls• Loads Map Tiles• Markers andannotationsImagery& InfoGeography& Routes
  6. 6. We will be using:ClientBrowserServerLeafletMapQuest OpenOSMMapDataNASAImageryMapQuest
  7. 7. Map Tiles• Instead of downloading entire map intothe browser, slice up into square pieces• Enables interactivity, smooth scrolling• uses AJAX calls to download tiles• lowers resource needs for browser andserver, lowers bandwidth demands
  8. 8. The Tao of Tiles• Longitude (x) goesfrom -180º to 180º• Latitude (y) goes from85.051º to -85.051º(arctan sinh π), not 90º• Tile is 256 x 256 pixels• Zoom level 0 has onetile for entire world
  9. 9. Zoom level 1 has 4 tilesnumber of tiles= 4zoom41= 4
  10. 10. Tile Explosion• City level (11) = 4,194,304 tiles• Street level (16) =4,294,967,296 tiles• Google maps goesto level 22 => 17 trillion tiles
  11. 11. Subdomains• Browsers used to be limited to 2 networkconnections per domain. (Recent browsersraised limit as high as 6.)• To get around this limitation, map serversgenerally point multiple (3 or 4) subdomainsat a single tile server.
  12. 12. Ex 1• Very simple map using Leaflet• JavaScript and CSS• Uses MapQuest Open tile server• Map data from OSM• jQuery• Chaining of Leaflet commands
  13. 13. MapQuest Open•• OpenStreetMap, aerial, and overlay tiles• Free!• Supports high bandwidth on request• Reliability is not guaranteed
  14. 14. Mapquest Open Tiles• Leaflet templates (subdomains: 1 2 3 4):http://otile{s}{z}/{x}/{y}.jpghttp://oatile{s}{z}/{x}/{y}.jpghttp://otile{s}{z}/{x}/{y}.png
  15. 15. Ex 2• Map options• Layers, Scale,Attribution controls• override Attribution control• Three basemaps: street, satellite, terrain• MapQuest Open, Natural Earth• Two overlays: weather radar and streets• Iowa NEXRAD (WMS), MapQuest Open
  16. 16. Tile Servers• Lots of tile servers out there• Raw tile servers (like MapQuest, Google)•• WMS (Like Iowa weather)•• Many more
  17. 17. 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)
  18. 18. Map Server URLsEasy to determine URL using browser debuggerGoogle MapsBrowserdebugger
  19. 19. ConstructingTile URL Templates row zoomL.tileLayer(http://mt{s}⤦src=app&x={x}&y={y}&z={z}&s=Ga,{ subdomains:0123, attribution:© Google })
  20. 20. Slippy Maps• “slippy” naming convention for map tiles:<sub><zoom>/<x>/<y>.<format>http://otile{s}{z}/{x}/{y}.png• Tiles can be served as normal filesNo need for a special tile server
  21. 21. Bing• Bing tiles use a different naming scheme,based on quadtrees.• There’s a Leaflet plugin for that!•
  22. 22. MakeYour Own Maps• Lots of Open Source Software for creatingmaps• CloudMade•• Mapbox•
  23. 23. Ex 3• Exercise:• Add a new base map and an overlay• Make them the default map layers• Use any other map (with raw tile server)• Use the debugger to figure out URLtemplate
  24. 24. Adding a Data Source• We are going to request real-time airplanepositions from the Flightstats data API• Need appId and appKey•• Airport tracks (departures)• Live documentation
  25. 25. AJAX• jQuery makes it very easy to make anAJAX call to a remote API• We are using the JSONP protocol and dataformat• Show position of each airplane with amarker and a popup
  26. 26. Ex 4• AJAX call to get data• Get airplane positions• Add markers and popups• L.marker
  27. 27. Customization• Leaflet has a powerful and easy-to-useobject model• Can extend built-in objects• override options• add additional methods
  28. 28. Ex 5• Custom icons for markers• airport control tower• airplanes• Rotate airplanes by extending Leafletobject model using .include
  29. 29. 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
  30. 30. Ex 6• (Advanced topic)• Create custom layers for airplanes andairport• Extend L.Class• You lose some functionality of L.marker,but you can add it back
  31. 31. Plug-ins••• Rotate markers!• (reinventing the wheel)
  32. 32. Libraries• Link to minified jQuery library• see• Link to minified Leaflet library• see• Versions on a popular CDN will be faster
  33. 33. Ex 7CDN (Content Delivery Network)1. <link  rel="stylesheet"  href="­‐0.5.1/leaflet.css"  />2. <!-­‐-­‐[if  lte  IE  8]>3.        <link  rel="stylesheet"  href="­‐0.5.1/"  />4. <![endif]-­‐-­‐>5. <script  src="­‐0.5.1/leaflet.js"></script>6. <script  type="text/javascript"  src="­‐1.9.1.js"></script>jQuery also on Google and Microsoft CDNs
  34. 34. Part 2• OpenStreetMap, iD, and QGIS• Mele and Grant