Leaflet Vector Tiles

An introduction to vector tiles as and Leaflet.MapboxVectorTile

Transcript

1. Leaflet.MapboxVectorTile
   Vector Tiles
   

   View Slide

2. “Old School” PNG Raster Tiles
   • Just a grid of PNG images that you can slip
   around…
   Actual PNG Tile
   From OpenStreetMap Zoomed In…
   

   View Slide

3. Raster Tile
   Discrete colors for each pixel.
   Need a data value for each pixel…
   

   View Slide

4. 4
   Vector Tiles
   All of the relevant big players in mapping use this…
   

   View Slide

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) …]
   

   View Slide

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) …]
   

   View Slide

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
   

   View Slide

8. Specification
   • Decodes binary protocal buffer (Google)
   files that adhere to the Mapobox Vector
   Tile (Mapbox) Specification.
   https://github.com/mapbox/vector-tile-spec
   

   View Slide

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…
   

   View Slide

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…
    

    View Slide

11. Each tile is a separate HTML5 Canvas.
    Polygon Framgent 1
    Polygon Framgent 2
    
    of the Democratic Republic of Congo
    
    Feature
    

    View Slide

12. This means each tile is being rendered
    
    by your GPU in parallel.
    FAST!
    

    View Slide

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
    

    View Slide

14. HTML5 Canvas Experiments
    

    View Slide

15. View Slide

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.
    

    View Slide

17. How do I make
    
    Mapbox Vector Tiles?
    

    View Slide

18. Option 1: Mapbox Studio
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. What if I need / want
    
    to create these things
    
    dynamically???
    

    View Slide

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!
    

    View Slide

27. View Slide