Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Leaflet Vector Tiles

Leaflet Vector Tiles

An introduction to vector tiles as and Leaflet.MapboxVectorTile


Nicholas Hallahan

October 15, 2014


  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

  15. None
  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

  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. What if I need / want to create these things

  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!
  27. None