Leaflet Vector Tiles

An introduction to vector tiles as and Leaflet.MapboxVectorTile

Transcript

1. Leaflet.MapboxVectorTile Vector Tiles
2. “Old School” PNG Raster Tiles • Just a grid of PNG images that you can slip around… Actual PNG Tile From OpenStreetMap Zoomed In…
3. Raster Tile Discrete colors for each pixel. Need a data value for each pixel…
4. 4 Vector Tiles All of the relevant big players in mapping use this…
5. Vector Tile No colors at all… It is a bunch of arrays in a 256 x 256 matrix. [ (x1,y1), (x2,y2), (x3,y3) …]
6. Here’s what we would have ! if there are two lines in a tile… [ (x1,y1), (x2,y2), (x3,y3) …], [ (x1,y1), (x2,y2), (x3,y3) …]
7. Same Tile Schema as PNG • Same addressing scheme as PNG Tiles • ( Google / OpenStreetMap Schema ) tileurl.com/4/2/5.png tileurl.com/4/2/5.pbf
8. Specification • Decodes binary protocal buffer (Google) files that adhere to the Mapobox Vector Tile (Mapbox) Specification. https://github.com/mapbox/vector-tile-spec
9. Why not GeoJSON? • A protocal buffer is a binary format that is very terse and compact, so it requires much less bandwidth than text-encoded JSON. • It automatically simplifies geometries appropriately to your given zoom level. • You cut out all of the extra data that the renderer never even uses…
10. What do the values look like? • Data values are decoded into pixel coordinates relative to the origin of the tile. • If 2 points are in a pixel, it is automatically simplified into 1 point. • This is in a post-projection space. It is exactly in the correct form for your renderer…
11. Each tile is a separate HTML5 Canvas. Polygon Framgent 1 Polygon Framgent 2 of the Democratic Republic of Congo Feature
12. This means each tile is being rendered by your GPU in parallel. FAST!
13. SpatialServer: Leaflet.MapboxVectorTile https://github.com/SpatialServer/Leaflet.MapboxVectorTile/ ! https://www.npmjs.org/package/leaflet-mapbox-vector-tile npm install leaflet-mapbox-vector-tile
14. HTML5 Canvas Experiments
16. How does this relate to MapboxGL? • Leaflet.MapboxVectorTile renders vector tiles as a set of canvas tile layers in Leaflet. • MapboxGL is more advanced than Leaflet and runs primarily from vector tiles. This uses OpenGL / WebGL instead of HTML5 canvas to render. It is more performant, but it is less stable than Leaflet and does not work on Internet Exploder.
17. How do I make Mapbox Vector Tiles?
18. Option 1: Mapbox Studio
25. What if I need / want to create these things dynamically???
26. The Spatial Server (formally known as Chubbs)… If you want Mapbox to serve it, you need to pre-render your tiles into .mbtiles format… SpatialServer looks at PostGIS tables and cuts you tiles on the fly!