State of the Art Web Mapping with Open Source

State of the Art Web Mappingwith Open SourceOSCON 2012 | Dane Springmeyer

@springmeyer github / twitter

see also: Justin MillerBuilding a mobile, ofﬂine mapping stack using open tools & data 5pm Wednesday, F150

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 ﬁeld / 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); line-cap:round; line-join:round; } .fill[zoom>=10] { line-color:@motorway; line-cap:round; line-join:round;}}

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)) Group of Cities

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

postgispostgis=# select POINT(-122.645.5)::geometry as geom,PDX::text as name; geom | name--------------------------------------------+------ 01010000006666666666A65EC00000000000C04640 | PDX(1 row) WKB (Well Known Binary)

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)

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.renderFileSync(map.png);

Leaﬂet<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>

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, shapeﬁle, 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 andconﬁgurable clientside renderers

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 ﬁle (Spatially Indexed) Data Processing: GIS Apps, Scripting

UI: Leaﬂet / 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

TileMillhttp://mapbox.com/tilemill/

Installing TileMill

TileMill: Ubuntusudo apt-add-repositoryppa:developmentseed/mapboxsudo apt-get -y updatesudo apt-get -y install tilemillsudo start tilemill

TileMill: Mac

TileMill: Basics Cross platform - Linux, Win, OS X Same code both desktop & webOutputs PNG, MBTiles, Mapnik XMLWritten in Javascript (Node.js) and C ++ (Mapnik)

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 sacriﬁcing speed

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/

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

Thanks! @springmeyer github / twitterdane@mapbox.com

Do not miss Stamen and Vizzuality (Cartodb)

TileMill Extra Details

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

http://dev.en.oreilly.com	184
http://strataconf.com	68
http://www.oscon.com	2

State of the Art Web Mapping with Open Source

by OSCON Byrum on Jul 17, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 254

Statistics

State of the Art Web Mapping with Open Source Presentation Transcript