Your SlideShare is downloading. ×
State of the Art Web Mapping with Open Source
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

State of the Art Web Mapping with Open Source


Published on

OSCON 2012 workshop given by Dane Springmeyer

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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.
  • 11. maps are simple (a primer)
  • 12. geodata as just anotherdata field / type
  • 13. cartography as just a sexy form of data visualization
  • 14. location: lat/lon, x/y attributes: name, type, value
  • 15. styles separate fromdata akin to css/html
  • 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. spatial typespoint: •line: -----------polygon: _____ |_____|
  • 18. Multi* types many to onegeometries feature
  • 19. tabular geo-csv latitude longitude name45.5 -122.6 PDX
  • 20. tabular geo-csv (multipoint) WKT Name MULTIPOINT ((10 40),(40 30), (20 20), (30 10)) Group of Cities
  • 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. postgispostgis=# select POINT(-122.645.5)::geometry as geom,PDX::text as name; geom | name--------------------------------------------+------ 01010000006666666666A65EC00000000000C04640 | PDX(1 row) WKB (Well Known Binary)
  • 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. minimal code forsimple maps, both server and client
  • 25. Mapnikvar mapnik = require(mapnik);var map = new mapnik.Map(256, 256);map.loadSync(map.xml);map.zoomAll();map.renderFileSync(map.png);
  • 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.
  • 28. but maps are hard
  • 29. geodata can bemessy and multi- resolution
  • 30. geodata can be huge
  • 31. geodata can be dynamic
  • 32. data storytakes too long
  • 33. maps as the singlelock-in point (google) or point of failure (Slow WMS, IE support, clashing design)
  • 34.
  • 35. how modernweb maps work
  • 36. or, how to tell stories with maps quickly, ensure they are fast under load and work in IE
  • 37. open data naturalearthdata.comus census (geo/www/tiger)local governments portals
  • 38. serversidepre-processing
  • 39. gradually work clientside
  • 40. tile renderersmapnik / mapserver
  • 41. fast app serversNode.js/Python/C++
  • 42. pre-processedpre-rendered cacheable
  • 43. beautiful graphics Antigrain Geometry Cairo Graphics
  • 44. standard formats geojson, wkt, csv, shapefile, postgis, geotiff
  • 45. tiled data
  • 46. bake big data bitmaps
  • 47. pre-render wherepossible, but beware the world is big
  • 48. coming...optimized tiled formatslike msgpack, protobuf (not just bitmaps)
  • 49. coming ...optimized tiled storage and indexing
  • 50. coming ... more robust andconfigurable clientside renderers
  • 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. 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.
  • 54. TileMill
  • 55. Installing TileMill
  • 56. TileMill: Ubuntusudo apt-add-repositoryppa:developmentseed/mapboxsudo apt-get -y updatesudo apt-get -y install tilemillsudo start tilemill
  • 57. TileMill: Mac
  • 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. Art of the possible
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65. Millions of points without sacrificing speed
  • 66. TileMill: Live Ec2 machines only available on July 17,2012set one up yourself like: guides/ubuntu-service/
  • 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. Thanks! @springmeyer github /
  • 69.
  • 70. Do not miss Stamen and Vizzuality (Cartodb)
  • 71. TileMill Extra Details
  • 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