Webvisions: When Google Maps gives you Lemons, Make Lemonade

When Google MapsGives You Lemons, Make Lemonade Wm Leler Flightstats Inc.

Google Maps (the good)• 7 years old, used by 350,000 websites• Free (until recently)• Far better than what was available before• Continuously improved: • Street view, 3D buildings, trafﬁc, routing ...• Brought map-based apps to the Internet • Enabled explosion of map mashups

Google Maps (the bad)• Closed, proprietary system • no source • difficult to fix bugs or add features • Poor separation of maps from API• Generic, one-size-fits-all • Three basemaps: street, satellite, terrain • Automobile centric

Google Maps (the evil)• The ﬁrst one is free • Now charging heavy users • Advertising• Suppressed development of alternatives• Google owns you and controls you • V2 to V3 API bungle

Maps in 3 Parts Imagery Geography Maps & Info & Routes DataServer 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

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• Slice up large maps into square pieces• Don’t have to download entire map into the browser• Enables interactivity, smooth scrolling • use AJAX calls to download tiles • lowers resource needs for browser and server, lowers bandwidth demands

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

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/

Map Tile Servers1. Use a public map server: • Open MapQuest, CloudMade, MapBox2. Use someone else’s map server3. Your own server • or cloud storage

Open Mapquest• http://open.mapquest.com/• OpenStreetMap, aerial, and overlay tiles• Free!• Supports high bandwidth on request • reliability is not guaranteed• Satellite imagery is seasonal!

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

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

Someone Else’s Server• Almost all map tile servers are unsecured• You are identiﬁed by the referrer header• 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 Safari Browser debugger

Constructing Tile URLshttp://mt1.google.com/vt/lyrs=m@174227760&hl=en& src=app&x=81&y=183&z=9&s=Ga subdomain column row zoomnew 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 })• Leaﬂet plugs in the values for you

Slippy Maps• “slippy” naming convention for map tiles:http://<sub>.domain.com/.../<zoom>/<x>/<y>.pnghttp://otile1.mqcdn.com/tiles/1.0.0/osm/4/63/99.png• Tiles can be served as normal ﬁles No need for a special tile server

MapsGL (side note)• Google has introduced MapsGL, which uses WebGL to draw streets, buildings, and other features directly in a canvas• Does not use image-based map tiles• Won’t work for satellite or other imagery• Currently works only on a few browsers• (alternatively, can use GeoJSON)

JavaScript Map APIs• Proprietary: • Google Maps API • Mapquest, Microsoft Bing, Nokia OVI, ...• Open: • OpenLayers - http://openlayers.org/ • Leaﬂet - http://leaﬂet.cloudmade.com/ • Modest Maps - http://modestmaps.com/ • Polymaps - http://polymaps.org/ (SVG)

Google Maps<html style="height:100%"><head><title>Google Maps Example</title><script src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false"></script></head><body style="height:100%;margin:0;padding:0"> <div id="map" style="width:100%; height:100%"></div><script type="text/javascript"> var pdx = new google.maps.LatLng(45.53, -122.67); var map = new google.maps.Map( document.getElementById(map), { center: pdx, zoom: 14, mapTypeID: google.maps.MapTypeId.ROADMAP) } );</script></body></html>

OpenLayers<html style="height:100%"><head><title>OpenLayers Example</title><script src="http://openlayers.org/api/OpenLayers.js"></script></head><body style="height:100%;margin:0;padding:0"> <div id="map" style="width:100%; height:100%"></div><script type="text/javascript"> var map = new OpenLayers.Map(map); var mapnik = new OpenLayers.Layer.OSM(); map.addLayer(mapnik); var pdx = new OpenLayers.LonLat(-122.67, 45.53). transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); map.setCenter(pdx, 14);</script></body></html>

Leaﬂet<html style="height:100%"><head> <title>Leaflet Example</title> <link rel="stylesheet" href="leaflet.css" />  <script type="text/javascript" src="leaflet.js"></script></head><body style="height:100%;margin:0;padding:0"><div id="map" style="height: 100%;width:100%"></div><script type="text/javascript"> var map = new L.Map(map); var tiles = new L.TileLayer(http://mt{s}.google.com/vt/v=w2.106&x={x}&y={y}&z={z}&s=,{ subdomains:0123, attribution:© Google 2011 }); var pdx = new L.LatLng(45.58961, -122.592121); map.addLayer(tiles).setView(pdx, 14);</script></body></html>

What should you do?• Just want to put a simple map on a web page or blog post? • Keep using Google Maps (or Bing, OVI, MapQuest, etc.), especially if you need trafﬁc data • Use a static image of a map • Mapbox Embed (no JavaScript!) - http://mapbox.com/hosting/embedding/

If you want more• More Flexibility • Leaﬂet with Open MapQuest • CloudMade or MapBox• More volume • your hosting on cloud • open (CC) maps (or your own)

http://rtp.trimet.org/• Multi-modal regional trip planner • car, bus, light rail, streetcar, trolley, commuter train, aerial tram, bicycle, walk • Open data allows customization• OpenLayers software on the browser• Open Mapquest servers, OpenStreetMap• Developing their own map

Foursquare• Leaﬂet on the browser• Mapbox servers (paid)• Mapbox “Streets” map (based on OSM data)

Flightstats• Leaﬂet• Amazon S3 and CloudFront servers• various open maps: • Stamen Design Terrain map • University of Heidelberg Open Map Surfer • NASA Blue Marble • our own maps

http://zat.com/talks/webvisions http://ﬂightstats.com http://ﬂightstats-inc.com

Webvisions: When Google Maps gives you Lemons, Make Lemonade

by Wm Leler

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 16

Statistics

Webvisions: When Google Maps gives you Lemons, Make Lemonade Presentation Transcript

http://lanyrd.com	15
http://www.docshut.com	1