Strata 2012

Beyond the Basemap

Early Maps

Along comes HTML5

• Canvas+WebGL
• Websockets
• File and Graphics card access
• Webworkers
• Offline storage

Canvas: Earthquake Heat Map

WebGL: Census block

WebGL: Building Footprints

6 Million Vertices

Personalization

• Base Map
  • Make your data come alive
  • Styled Maps
• Data
  • Subset
  • Color
  • Size
  • Shading

WebGL: SF Taxis

WebGL: SF Taxis

WebGL: SF Taxis

WebGL: SF Taxis

WebGL: SF Taxis

Optimizations

• HTML5 Typed Arrays — fast!
• HTML5 ArrayBuffer — reduce processing
• Precision / size tradeoff
• Streaming via WebSockets — lower perceived latency

Android GMM Vector Maps

Questions/Links

Find us on Google Plus

Mano Marks

Chris Broadfoot

This presentation

heatmap.js

MapsGL: Go to Google Maps, enable MapsGL experiment

HTML5 Rocks