Your SlideShare is downloading. ×
0
State of the Art  Web Mappingwith Open SourceOSCON 2012 | Dane Springmeyer
@springmeyer github / twitter
see also:           Justin MillerBuilding a mobile, offline mapping stack        using open tools & data        5pm Wednesd...
Background    Engineer @ MapBox Building TileMill and MapnikWeb performance / rendering
github / twitterhttp://mapbox.com
We provide services & open source tools
open source tools    to cover
CartoDB
TileMill
•
maps are simple   (a primer)
geodata as  just anotherdata field / type
cartography as just a sexy form of data    visualization
location: lat/lon, x/y    attributes: name, type, value
styles separate fromdata akin to css/html
CartoCSS@motorway: #90BFE0;.highway[TYPE=motorway] {  .line[zoom>=0]    {      line-color: spin(darken(@motorway,36),-10);...
spatial typespoint:		 	 	 •line:		 	 	 	 	 -----------polygon:                             _____                          ...
Multi* types  many to onegeometries   feature
tabular geo-csv latitude    longitude   name45.5        -122.6       PDX
tabular geo-csv        (multipoint)        WKT                     Name MULTIPOINT ((10 40),(40 30), (20 20), (30 10))    ...
geojson { "type": "FeatureCollection",   "features": [     { "type": "Feature",         "properties": { "name": "PDX" },  ...
postgispostgis=# select POINT(-122.645.5)::geometry as geom,PDX::text as name;                    geom                    ...
postgispostgis=# select ST_Distance(POINT(-122.645.5)::geography,POINT(-122.347.6)::geography)/1609.344 asdist_in_miles_fr...
minimal code forsimple maps, both server and client
Mapnikvar mapnik = require(mapnik);var map = new mapnik.Map(256, 256);map.loadSync(map.xml);map.zoomAll();map.renderFileSy...
Leaflet<html><head>  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />  <script src="http...
•
but maps are    hard
geodata can bemessy and multi-  resolution
geodata can be    huge
geodata can be   dynamic
data    storytakes too long
maps as the singlelock-in point (google)  or point of failure (Slow WMS, IE support, clashing           design)
•
how modernweb maps work
or, how to tell stories  with maps quickly, ensure they are fast    under load and      work in IE
open data         osm.org   naturalearthdata.comus census (geo/www/tiger)local governments portals
serversidepre-processing
gradually work   clientside
tile renderersmapnik / mapserver
fast app serversNode.js/Python/C++
pre-processedpre-rendered  cacheable
beautiful graphics Antigrain Geometry   Cairo Graphics
standard formats  geojson, wkt, csv,  shapefile, postgis,       geotiff
tiled data
bake big data   bitmaps
pre-render wherepossible, but beware the      world is big
coming...optimized tiled formatslike msgpack, protobuf    (not just bitmaps)
coming ...optimized tiled storage     and indexing
coming ...  more robust andconfigurable clientside     renderers
UI: Browser JS client / Mobile Native client   Render:                            Display:Hardware Vector                 ...
UI: Leaflet / ModestMaps / RouteMe    Render:                         Display: Kothic.js / Vecnik                all brower...
•
TileMillhttp://mapbox.com/tilemill/
Installing TileMill
TileMill: Ubuntusudo apt-add-repositoryppa:developmentseed/mapboxsudo apt-get -y updatesudo apt-get -y install tilemillsud...
TileMill: Mac
TileMill: Basics Cross platform - Linux, Win, OS X  Same code both desktop & webOutputs PNG, MBTiles, Mapnik XMLWritten in...
Art of the possible
http://project.wnyc.org/stop-frisk-guns/
http://gop.sites.devseed.com/
foursquare.com
http://www.npr.org/censusmap/
http://streeteasy.com/
Millions of points without sacrificing speed
TileMill: Live       http://bit.ly/MFjLnG       http://bit.ly/SFeBfJ      Ec2 machines only available on July 17,2012set o...
Demos...• TileMill: layer ordering, fonts, labeling,  plugins, mbtiles export, mapnik xml export,  svg/marker-transforms• ...
Thanks! @springmeyer  github / twitterdane@mapbox.com
•
Do not miss Stamen   and Vizzuality    (Cartodb)
TileMill Extra Details
IVE                                                                         doi:10.1038/nature10836pen computer programsm-...
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
Upcoming SlideShare
Loading in...5
×

State of the Art Web Mapping with Open Source

2,960

Published on

OSCON 2012 workshop given by Dane Springmeyer

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,960
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
90
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "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 / twitterhttp://mapbox.com
  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="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script></head><body>! <div id="map" style="width: 100%; height: 100%"></div> <script> var map = new L.Map(map); var osm = new L.TileLayer(http://tile.osm.org/{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 osm.org 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. TileMillhttp://mapbox.com/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. http://project.wnyc.org/stop-frisk-guns/
  61. 61. http://gop.sites.devseed.com/
  62. 62. foursquare.com
  63. 63. http://www.npr.org/censusmap/
  64. 64. http://streeteasy.com/
  65. 65. Millions of points without sacrificing speed
  66. 66. TileMill: Live http://bit.ly/MFjLnG http://bit.ly/SFeBfJ Ec2 machines only available on July 17,2012set one up yourself like: http://mapbox.com/tilemill/docs/ 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 / twitterdane@mapbox.com
  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.

×