State of the Art Web Mapping with Open Source

State of the Art
Web Mapping
with Open Source
OSCON 2012 | Dane Springmeyer

@springmeyer
github / twitter

see also:
Justin Miller
Building a mobile, ofﬂine mapping stack
using open tools & data

5pm Wednesday, F150

Background

Engineer @ MapBox
Building TileMill and Mapnik
Web performance / rendering

github / twitter
http://mapbox.com

We provide services & open source tools

open source tools
to cover

geodata as
just another
data ﬁeld / type

cartography as just a
sexy form of data
visualization

location: lat/lon, x/y

attributes:
name, type, value

styles separate from
data 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 types
point:

•
line:

-----------
polygon:
_____
|_____|

Multi* types
many to one
geometries feature

tabular geo-csv
latitude longitude name

45.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

postgis
postgis=# select 'POINT(-122.6
45.5)'::geometry as geom,'PDX'::text as name;

geom | name
--------------------------------------------+------
01010000006666666666A65EC00000000000C04640 | PDX
(1 row)

WKB
(Well Known Binary)

postgis
postgis=# select ST_Distance('POINT(-122.6
45.5)'::geography,'POINT(-122.3
47.6)'::geography)/1609.344 as
dist_in_miles_from_pdx_to_sea;

dist_in_miles_from_pdx_to_sea
-------------------------------
145.755555956692
(1 row)

minimal code for
simple maps, both
server and client

Mapnik

var 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>

geodata can be
messy and multi-
resolution

maps as the single
lock-in point (google)
or point of failure
(Slow WMS, IE support, clashing
design)

or, how to tell stories
with maps quickly,
ensure they are fast
under load and
work in IE

open data
osm.org
naturalearthdata.com
us census (geo/www/tiger)
local governments portals

tile renderers
mapnik / mapserver

fast app servers
Node.js/Python/C++

pre-processed
pre-rendered
cacheable

beautiful graphics
Antigrain Geometry
Cairo Graphics

standard formats
geojson, wkt, csv,
shapeﬁle, postgis,
geotiff

pre-render where
possible, but beware the
world is big

coming...
optimized tiled formats
like msgpack, protobuf
(not just bitmaps)

coming ...
optimized tiled storage
and indexing

coming ...
more robust and
conﬁ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

TileMill
http://mapbox.com/tilemill/

TileMill: Ubuntu
sudo apt-add-repository
ppa:developmentseed/mapbox
sudo apt-get -y update
sudo apt-get -y install tilemill
sudo start tilemill

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

http://project.wnyc.org/stop-frisk-guns/

Millions of points without sacriﬁcing speed

TileMill: Live

http://bit.ly/MFjLnG
http://bit.ly/SFeBfJ
Ec2 machines only available on July 17,2012
set 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 / twitter
dane@mapbox.com

Do not miss Stamen
and Vizzuality
(Cartodb)

IVE doi:10.1038/nature10836

pen computer programs
m-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 remains
es 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 and
were thought almost interpretation13 problems found in programming languages, which we
gies allow data collec- discuss later. Without code, direct reproducibility is impossible. Indirect
data are collected, and reproducibility refers to independent efforts to validate something other
vailable 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 of
ing, 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 the
ual 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 capability
dless, 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 is
cies 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. On
program 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

State of the Art Web Mapping with Open Source

State of the Art Web Mapping with Open Source

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to State of the Art Web Mapping with Open Source

Similar to State of the Art Web Mapping with Open Source (20)

More from OSCON Byrum

More from OSCON Byrum (20)

Recently uploaded

Recently uploaded (20)

State of the Art Web Mapping with Open Source