NACIS 2012 Workshop
Upcoming SlideShare
Loading in...5
×
 

NACIS 2012 Workshop

on

  • 785 views

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

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

Statistics

Views

Total Views
785
Views on SlideShare
785
Embed Views
0

Actions

Likes
0
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

NACIS 2012 Workshop NACIS 2012 Workshop Presentation Transcript

  • Powerful Mapping WebApplications with Open Source Tools Wm Leler - Flightstats, Inc. Mele Sax-Barnett & Grant Humphries - TriMet
  • 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.
  • 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 View slide
  • Directory structure• workshop/ • ex*.html and ex*.js • img/ • jquery-1.8.2.js • Leaflet/ View slide
  • 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
  • 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
  • Rendering Map DataMap Data: roads, boundaries, names, ... Styles: colors,Zoom Render line widths,levels fonts, Tile hill shading, visibility, detail, ... Map Tiles to Serve
  • 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
  • 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
  • Zoom level 1 has 4 tiles number of tiles zoom = 4 1 4 =4
  • 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
  • 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/
  • 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
  • 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
  • Ex 2• Move JavaScript into a separate file• Pattern to isolate namespace• jQuery • $(document).ready() • instead of “onload”• L.latLng location
  • Ex 3• Overlay layer • Composite weather radar data from NEXRAD (National Weather Service) • Iowa State server • WMS (Web Map Server)
  • 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
  • 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
  • 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/
  • 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
  • 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
  • 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
  • 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
  • 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)
  • Map Server URLsEasy to determine URL using browser debugger Google Maps Browser debugger
  • 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 })
  • 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
  • Bing• Bing tiles use a different naming scheme, based on quadtrees.• There’s a Leaflet plugin for that!• https://gist.github.com/1221998
  • 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
  • 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
  • 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
  • Ex 6• AJAX call to get data • Get airplane positions• Add markers and popups • L.marker
  • Ex 7• Replace marker with Geometry (circle) • L.circleMarker• Handle both departing and arriving flights
  • Ex 8• Add airport control tower• Add image icon to a marker • img/tower.png • L.icon class
  • Ex 9• Create a custom image for a marker• airplane icons• Use divIcon class • L.divIcon• Add rotate method to Marker class
  • 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
  • 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
  • Plug-ins• http://leaflet.cloudmade.com/plugins.html• https://github.com/shramov/leaflet-plugins • Rotate markers! • (reinventing the wheel)
  • 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
  • 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
  • Part 2• Open Street Map and QGIS• Mele and Grant