Anatomy of Online Mapping

Transcript

1. Info Basemap: general geographic borders and context Features: the points/polygons of interest; your data Interaction Layer: linkage between mouse actions and map features. Visual feedback : the info and visual cues you as viewer receive from your hovers and clicks Map Anatomy Thursday, April 25, 13
2. Info Examples Basemap: Google, OSM, Stamen Watercolor Features: markers and shapes. Map API, TileMill/CartoDB (PNGs), Geojson+Canvas/SVG Visual feedback : marker windows, tooltips and highlighting Interaction Layer: onClick/onHover/ CSS binding (DOM/SVG); UTFGrid (hit-grid); AJAX "point of interest?" Thursday, April 25, 13
3. Info Client Side Server Side Everything N/A DOM/CSS Binding, UTFGrid (reading) Canvas Geometry UTFGrid (Rendering), AJAX "Point of Interest" lookup CartoDB; node-canvas TileMill (pre-render); Mapnik Map APIs, Canvas, SVG Google, OSM, Tilemill+Mapbox, Stamen Thursday, April 25, 13
4. ImageTiles + UTFGrid Image Tiles/UTFGrid + Ajax Description Example Hovertips Clicks Shape highlighting Data transfer Client Processing Server processing Static tiles with feature metadata transferred in UTFgrid Static tiles with limited feature metadata transferred in UTFGrid (full metadata retrieved on click via Ajax) Tilemill (Mapnik), My NodeTile CartoDB (Mapnik) Yes Yes/limited Yes Yes - Required for full metadata No No Small initial load, but lots of panning/zooming causes redundant UTFGRid data to be transferred Tiny initial load but data via AJAX could cause hiccups; less redundant UTFgrid Low Low Low if pre-rendered/static (Tilemill) / High if rendered live (my nodetile) High Thursday, April 25, 13
5. GeoJSON + Canvas GeoJSON + SVG Description Example Clicks Hovertips Shape highlighting Data transfer Client Processing Server processing Static basemap with features sent to client and rendered with canvas Static basemap with features sent to client and rendered with SVG Leaflet Open311 Dashboard (the original one) Yes Yes Yes-Requires complicated geometry Yes - Easy b/c SVG in DOM Yes-Requires complicated geometry Yes - Easy b/c SVG in DOM High - all geometry must be sent to client High - all geometry must be sent to client Moderate High - SVG slow Low Low Thursday, April 25, 13
6. ImageTiles + UTFGrid + Ajax + Canvas/SVG Description Example Hovertips Clicks Shape highlighting Data transfer Client Processing Server processing Static tiles with limited metadata transferred in UTFgrid; on interaction (click/long- hover) full metadata+geojson is sent to client to render/highlight that feature No idea, but could be awesome Yes Yes Yes - onClick Low - moderate: initial load would be small, but AJaxed geojson could add up Low - moderate: Canvas/SVG only rendered on interaction Moderate - High Thursday, April 25, 13