diy osm pbf vector tiles - state of the map 2013

14
DIY OSM PBF VECTOR TILES Norbert Renner (ikonor)

Upload: osmfstateofthemap

Post on 18-Dec-2014

1.066 views

Category:

Technology


3 download

DESCRIPTION

*** Presented by Norbert Renner at State of the Map 2013 *** For the video of this presentation please see http://lanyrd.com/2013/sotm/scpkrt/ *** Full schedule available at http://wiki.openstreetmap.org/wiki/State_Of_The_Map_2013 This talk presents a simple way to generate and use your own vector tiles. The idea is to have raw data tiles in the binary OSM PBF format, that are not optimized and thus provide all options for interactivity and rendering in modern browsers. As long as there is no global service to serve such tiles, the Mapsplit tool can be used to split an extract of your area of interest into tile files that can be read directly in the browser - no need for a database or a server.

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