Your SlideShare is downloading. ×

DIY OSM PBF vector tiles - State of the Map 2013

1,451

Published on

*** Presented by Norbert Renner at State of the Map 2013 …

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,451
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×