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. 1. State of the Art Web Mappingwith Open SourceOSCON 2012 | Dane Springmeyer
  2. 2. @springmeyer github / twitter
  3. 3. see also: Justin MillerBuilding a mobile, offline mapping stack using open tools & data 5pm Wednesday, F150
  4. 4. Background Engineer @ MapBox Building TileMill and MapnikWeb performance / rendering
  5. 5. github / twitter
  6. 6. We provide services & open source tools
  7. 7. open source tools to cover
  8. 8. CartoDB
  9. 9. TileMill
  10. 10.
  11. 11. maps are simple (a primer)
  12. 12. geodata as just anotherdata field / type
  13. 13. cartography as just a sexy form of data visualization
  14. 14. location: lat/lon, x/y attributes: name, type, value
  15. 15. styles separate fromdata akin to css/html
  16. 16. 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;}}
  17. 17. spatial typespoint: •line: -----------polygon: _____ |_____|
  18. 18. Multi* types many to onegeometries feature
  19. 19. tabular geo-csv latitude longitude name45.5 -122.6 PDX
  20. 20. tabular geo-csv (multipoint) WKT Name MULTIPOINT ((10 40),(40 30), (20 20), (30 10)) Group of Cities
  21. 21. 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
  22. 22. postgispostgis=# select POINT(-122.645.5)::geometry as geom,PDX::text as name; geom | name--------------------------------------------+------ 01010000006666666666A65EC00000000000C04640 | PDX(1 row) WKB (Well Known Binary)
  23. 23. 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)
  24. 24. minimal code forsimple maps, both server and client
  25. 25. Mapnikvar mapnik = require(mapnik);var map = new mapnik.Map(256, 256);map.loadSync(map.xml);map.zoomAll();map.renderFileSync(map.png);
  26. 26. 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>
  27. 27.
  28. 28. but maps are hard
  29. 29. geodata can bemessy and multi- resolution
  30. 30. geodata can be huge
  31. 31. geodata can be dynamic
  32. 32. data storytakes too long
  33. 33. maps as the singlelock-in point (google) or point of failure (Slow WMS, IE support, clashing design)
  34. 34.
  35. 35. how modernweb maps work
  36. 36. or, how to tell stories with maps quickly, ensure they are fast under load and work in IE
  37. 37. open data naturalearthdata.comus census (geo/www/tiger)local governments portals
  38. 38. serversidepre-processing
  39. 39. gradually work clientside
  40. 40. tile renderersmapnik / mapserver
  41. 41. fast app serversNode.js/Python/C++
  42. 42. pre-processedpre-rendered cacheable
  43. 43. beautiful graphics Antigrain Geometry Cairo Graphics
  44. 44. standard formats geojson, wkt, csv, shapefile, postgis, geotiff
  45. 45. tiled data
  46. 46. bake big data bitmaps
  47. 47. pre-render wherepossible, but beware the world is big
  48. 48. coming...optimized tiled formatslike msgpack, protobuf (not just bitmaps)
  49. 49. coming ...optimized tiled storage and indexing
  50. 50. coming ... more robust andconfigurable clientside renderers
  51. 51. 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
  52. 52. 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
  53. 53.
  54. 54. TileMill
  55. 55. Installing TileMill
  56. 56. TileMill: Ubuntusudo apt-add-repositoryppa:developmentseed/mapboxsudo apt-get -y updatesudo apt-get -y install tilemillsudo start tilemill
  57. 57. TileMill: Mac
  58. 58. TileMill: Basics Cross platform - Linux, Win, OS X Same code both desktop & webOutputs PNG, MBTiles, Mapnik XMLWritten in Javascript (Node.js) and C ++ (Mapnik)
  59. 59. Art of the possible
  60. 60.
  61. 61.
  62. 62.
  63. 63.
  64. 64.
  65. 65. Millions of points without sacrificing speed
  66. 66. TileMill: Live Ec2 machines only available on July 17,2012set one up yourself like: guides/ubuntu-service/
  67. 67. 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
  68. 68. Thanks! @springmeyer github /
  69. 69.
  70. 70. Do not miss Stamen and Vizzuality (Cartodb)
  71. 71. TileMill Extra Details
  72. 72. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.