State of the Art Web Mapping with Open Source


Published on

OSCON 2012 workshop given by Dane Springmeyer

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

State of the Art Web Mapping with Open Source

  1. State of the Art Web Mappingwith Open SourceOSCON 2012 | Dane Springmeyer
  2. @springmeyer github / twitter
  3. see also: Justin MillerBuilding a mobile, offline mapping stack using open tools & data 5pm Wednesday, F150
  4. Background Engineer @ MapBox Building TileMill and MapnikWeb performance / rendering
  5. github / twitter
  6. We provide services & open source tools
  7. open source tools to cover
  8. CartoDB
  9. TileMill
  10. maps are simple (a primer)
  11. geodata as just anotherdata field / type
  12. cartography as just a sexy form of data visualization
  13. location: lat/lon, x/y attributes: name, type, value
  14. styles separate fromdata akin to css/html
  15. CartoCSS@motorway: #90BFE0;.highway[TYPE=motorway] { .line[zoom>=0] { line-color: spin(darken(@motorway,36),-10); line-cap:round; line-join:round; } .fill[zoom>=10] { line-color:@motorway; line-cap:round; line-join:round;}}
  16. spatial typespoint: •line: -----------polygon: _____ |_____|
  17. Multi* types many to onegeometries feature
  18. tabular geo-csv latitude longitude name45.5 -122.6 PDX
  19. tabular geo-csv (multipoint) WKT Name MULTIPOINT ((10 40),(40 30), (20 20), (30 10)) Group of Cities
  20. geojson { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "PDX" }, "geometry" : { "type": "Point", "coordinates": [ -122.6, 45.5 ] } }]}Works everywhere: e.g QGIS, TileMill, Web clients
  21. postgispostgis=# select POINT(-122.645.5)::geometry as geom,PDX::text as name; geom | name--------------------------------------------+------ 01010000006666666666A65EC00000000000C04640 | PDX(1 row) WKB (Well Known Binary)
  22. postgispostgis=# select ST_Distance(POINT(-122.645.5)::geography,POINT(-122.347.6)::geography)/1609.344 asdist_in_miles_from_pdx_to_sea; dist_in_miles_from_pdx_to_sea------------------------------- 145.755555956692(1 row)
  23. minimal code forsimple maps, both server and client
  24. Mapnikvar mapnik = require(mapnik);var map = new mapnik.Map(256, 256);map.loadSync(map.xml);map.zoomAll();map.renderFileSync(map.png);
  25. Leaflet<html><head> <link rel="stylesheet" href="" /> <script src=""></script></head><body>! <div id="map" style="width: 100%; height: 100%"></div> <script> var map = new L.Map(map); var osm = new L.TileLayer({z}/{x}/{y}.png); map.setView(new L.LatLng(45.5, -122.65), 12).addLayer(osm); var pdx = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "PDX" }, "geometry" : { "type": "Point","coordinates": [ -122.65, 45.5 ]}}] }; map.addLayer(new L.GeoJSON(pdx)); </script></body></html>
  26. but maps are hard
  27. geodata can bemessy and multi- resolution
  28. geodata can be huge
  29. geodata can be dynamic
  30. data storytakes too long
  31. maps as the singlelock-in point (google) or point of failure (Slow WMS, IE support, clashing design)
  32. how modernweb maps work
  33. or, how to tell stories with maps quickly, ensure they are fast under load and work in IE
  34. open data naturalearthdata.comus census (geo/www/tiger)local governments portals
  35. serversidepre-processing
  36. gradually work clientside
  37. tile renderersmapnik / mapserver
  38. fast app serversNode.js/Python/C++
  39. pre-processedpre-rendered cacheable
  40. beautiful graphics Antigrain Geometry Cairo Graphics
  41. standard formats geojson, wkt, csv, shapefile, postgis, geotiff
  42. tiled data
  43. bake big data bitmaps
  44. pre-render wherepossible, but beware the world is big
  45. coming...optimized tiled formatslike msgpack, protobuf (not just bitmaps)
  46. coming ...optimized tiled storage and indexing
  47. coming ... more robust andconfigurable clientside renderers
  48. UI: Browser JS client / Mobile Native client Render: Display:Hardware Vector <img> tiles Renderer Data Tiles: Image Tiles:Optimized vectors Software Vector Renderer Storage: Database / Flat file (Spatially Indexed) Data Processing: GIS Apps, Scripting
  49. UI: Leaflet / ModestMaps / RouteMe Render: Display: Kothic.js / Vecnik all browers(Canvas/WebGL in support some browsers) Data Tiles: Image Tiles: TileStache / Mapnik via TileMill Kothic.js / or TileStache TileMill ? + UTFGrid interactivity Storage: Postgres-PostGIS / CSV / GeoJSON Data Processing: Qgis, R stats, Python, SQL
  50. TileMill
  51. Installing TileMill
  52. TileMill: Ubuntusudo apt-add-repositoryppa:developmentseed/mapboxsudo apt-get -y updatesudo apt-get -y install tilemillsudo start tilemill
  53. TileMill: Mac
  54. TileMill: Basics Cross platform - Linux, Win, OS X Same code both desktop & webOutputs PNG, MBTiles, Mapnik XMLWritten in Javascript (Node.js) and C ++ (Mapnik)
  55. Art of the possible
  61. Millions of points without sacrificing speed
  62. TileMill: Live Ec2 machines only available on July 17,2012set one up yourself like: guides/ubuntu-service/
  63. Demos...• TileMill: layer ordering, fonts, labeling, plugins, mbtiles export, mapnik xml export, svg/marker-transforms• TileMill: reinforce basics through demos: arc.js geojson, cartodb csv, etherpad csv• OSM-bright setup
  64. Thanks! @springmeyer github /
  65. Do not miss Stamen and Vizzuality (Cartodb)
  66. TileMill Extra Details
  67. IVE doi:10.1038/nature10836pen computer programsm-Cumming3 idence that cannot be entirely included in publications, but the rise of layer of inaccessibility. Although it is now accepted that data should be made ons regarding the availability of software are inconsistent. We argue that, with elease of source programs is intolerable for results that depend on computation.nd natural language will always ensure that exact reproducibility remainses the chances that efforts to reproduce results will fail. d to unprecedented rerunning of the code on, say, a different combination of hardware and e powerful computers systems software, to detect the sort of numerical computation11,12 andwere thought almost interpretation13 problems found in programming languages, which wegies allow data collec- discuss later. Without code, direct reproducibility is impossible. Indirectdata are collected, and reproducibility refers to independent efforts to validate something othervailable with which to than the entire code package, for example a subset of equations or a par- ticular code module. Here, before time-consuming reprogramming of an y, by which we mean entire model, researchers may simply want to check that incorrect coding ofing, rather than exact previously published equations has not invalidated a paper’s result, to n to several decimal extract and check detailed assumptions, or to run their own code against (for an early attempt the original to check for statistical validity and explain any discrepancies.y available computer Any debate over the difficulties of reproducibility (which, as we will d the point that, with show, are non-trivial) must of course be tempered by recognizing theual source code is an undeniable benefits afforded by the explosion of internet facilities and the depend on computa- rapid increase in raw computational speed and data-handling capabilitydless, and needlessly that has occurred as a result of major advances in computer technology14. Such advances have presented science with a great opportunity to address computer programs problems that would have been intractable in even the recent past. It iscies still ranging from our view, however, that the debate over code release should be resolved as ral language descrip- soon as possible to benefit fully from our novel technical capabilities. Onprogram algorithms. their own, finer computational grids, longer and more complex compu- n computer program tations and larger data sets—although highly attractive to scientific e in the list of items researchers—do not resolve underlying computational uncertainties of