Download - DIY OSM PBF vector tiles - State of the Map 2013

Transcript
Page 1: DIY OSM PBF vector tiles - State of the Map 2013

DIY OSM PBF VECTOR TILESNorbert Renner (ikonor)

Page 2: DIY OSM PBF vector tiles - State of the Map 2013

DIY OSM PBF VECTOR TILESA simple, do-it-yourself solution of generating your own

vector tiles and using them in the Browser with Leaflet - nodatabase and no special vector tile server needed.

Page 3: DIY OSM PBF vector tiles - State of the Map 2013

WORK IN PROGRESSVery alpha and inefficient right now, so it's slow and might

also crash your Browser.

By Spinoziano (Own work) [Public domain], via Wikimedia Commons

Page 4: DIY OSM PBF vector tiles - State of the Map 2013

VECTOR TILES“Vector tiles are a way to deliver geographic

data in small chunks to a browser or otherclient app. Vector tiles are similar to rastertiles but instead of raster images the datareturned is a vector representation of the

features in the tile.”

http://wiki.openstreetmap.org/wiki/Vector_tiles

Page 5: DIY OSM PBF vector tiles - State of the Map 2013

PBF FORMATProtocolbuffer Binary Format

http://wiki.openstreetmap.org/wiki/PBF_Format

alternative to the XML formatfile extension *.osm.pbf30% smaller than a bzipped planet6x faster to read than a gzipped planet(not with JavaSript/Browser?)

Page 6: DIY OSM PBF vector tiles - State of the Map 2013

MOTIVATIONalready global Mapnik Vector Tiles by Michal Migurski

but: optimized for Rendering

Page 7: DIY OSM PBF vector tiles - State of the Map 2013

I WANT THE RAW THING!as in editors, but larger areain the Browserinteractivity (on hover)

Page 8: DIY OSM PBF vector tiles - State of the Map 2013

FUTUREJOSM MapCSS StylesFilteringITO Map-like highlighting (e.g. Maxspeed)

Page 9: DIY OSM PBF vector tiles - State of the Map 2013

MAPSPLITJava PBF splitter tool

by PedaB

http://wiki.openstreetmap.org/wiki/Mapsplit

zoom 13 onlyunclipped (complete ways)

Page 10: DIY OSM PBF vector tiles - State of the Map 2013

OSM-PBF.JSJavaScript PBF reader part from visual trip planner

by Brandon Martin-Anderson

https://github.com/nrenner/osm-pbf.js

for node.jsbrowserify with additions for BrowserTyped Arrays for reading binary data

probably will replace with / osm-read ProtoBuf.js

Page 11: DIY OSM PBF vector tiles - State of the Map 2013

OSM-PBF-LEAFLEThttps://github.com/nrenner/osm-pbf-leaflet

Builds Leaflet vector features from PBF, derived from leaflet-osm

by John Firebaugh

Page 12: DIY OSM PBF vector tiles - State of the Map 2013

LEAFLET-TILELAYER-VECTORVector tile layer for Leaflet

forked from leaflet-tilelayer-geojsonby Glen Robertson and Nelson Minar, Alex Barth, Pawel Paprota, Mick Thompson

https://github.com/nrenner/leaflet-tilelayer-vector

overzoom > 13handle unclipped tiles (deduplicate)Web Workers for parallel PBF reading

Page 13: DIY OSM PBF vector tiles - State of the Map 2013

MAPSPLIT MAPhttps://github.com/nrenner/mapsplit-map

The final application

Page 14: DIY OSM PBF vector tiles - State of the Map 2013

DEMO

(best viewed with Chrome/Chromium, Firefox should also work)http://norbertrenner.de/osm/mapsplit-map/

LINKS & CONTACTGitHub: nrenner/mapsplit-mapOSM: ikonorTwitter: @ikonor