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

1. DIY OSM PBF VECTOR TILES
Norbert Renner (ikonor)

2. DIY OSM PBF VECTOR TILES
A simple, do-it-yourself solution of generating your own
vector tiles and using them in the Browser with Leaflet - no
database and no special vector tile server needed.

3. WORK IN PROGRESS
Very alpha and inefficient right now, so it's slow and might
also crash your Browser.
By Spinoziano (Own work) [Public domain],
via Wikimedia Commons

4. VECTOR TILES
“Vector tiles are a way to deliver geographic
data in small chunks to a browser or other
client app. Vector tiles are similar to raster
tiles but instead of raster images the data
returned is a vector representation of the
features in the tile.”
http://wiki.openstreetmap.org/wiki/Vector_tiles

5. PBF FORMAT
Protocolbuffer Binary Format
http://wiki.openstreetmap.org/wiki/PBF_Format
alternative to the XML format
file extension *.osm.pbf
30% smaller than a bzipped planet
6x faster to read than a gzipped planet
(not with JavaSript/Browser?)

6. MOTIVATION
already global Mapnik Vector Tiles by Michal Migurski
but: optimized for Rendering

7. I WANT THE RAW THING!
as in editors, but larger area
in the Browser
interactivity (on hover)

8. FUTURE
JOSM MapCSS Styles
Filtering
ITO Map-like highlighting (e.g. Maxspeed)

9. MAPSPLIT
http://wiki.openstreetmap.org/wiki/Mapsplit
Java PBF splitter tool
by PedaB
zoom 13 only
unclipped (complete ways)

10. OSM-PBF.JS
https://github.com/nrenner/osm-pbf.js
JavaScript PBF reader part from visual trip planner
by Brandon Martin-Anderson
for node.js
browserify with additions for Browser
Typed Arrays for reading binary data
probably will replace with osm-read / ProtoBuf.js

11. OSM-PBF-LEAFLET
https://github.com/nrenner/osm-pbf-leaflet
Builds Leaflet vector features from PBF,
derived from leaflet-osm
by John Firebaugh

12. LEAFLET-TILELAYER-VECTOR
https://github.com/nrenner/leaflet-tilelayer-vector
Vector tile layer for Leaflet
forked from leaflet-tilelayer-geojson
by Glen Robertson and Nelson Minar, Alex Barth, Pawel Paprota, Mick Thompson
overzoom > 13
handle unclipped tiles (deduplicate)
Web Workers for parallel PBF reading

13. MAPSPLIT MAP
https://github.com/nrenner/mapsplit-map
The final application

14. DEMO
http://norbertrenner.de/osm/mapsplit-map/
(best viewed with Chrome/Chromium, Firefox should also work)
LINKS & CONTACT
GitHub: nrenner/mapsplit-map
OSM: ikonor
Twitter: @ikonor