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

Vector Tile Maps, Sam Matthews, Mapbox

ESIP Federation
December 08, 2016

Vector Tile Maps, Sam Matthews, Mapbox

ESIP Interoperability and Technology Committee "Tech Dives" Webinar

ESIP Federation

December 08, 2016
Tweet

More Decks by ESIP Federation

Other Decks in Science

Transcript

  1. Sam Matthews | December 8th, 2016 | 1 Vector Tile

    Maps Sam Matthews - Mapbox Interoperability and Technology/Tech Dive Webinar Series
  2. Sam Matthews | December 8th, 2016 | 2

  3. Sam Matthews | December 8th, 2016 | 3 Overview •

    why vector tiles? • anatomy (the specification) • encoding & decoding (a pipeline) • styling • 3D
  4. Sam Matthews | December 8th, 2016 | 4 Why vector

    tiles? • Enable WebGL • Styles are first class citizens • Cost savings (make the browser do work)
  5. Sam Matthews | December 8th, 2016 | 5 Rotating with

    raster tiles
  6. Sam Matthews | December 8th, 2016 | 6 Rotating with

    WebGL & vector tiles
  7. Sam Matthews | December 8th, 2016 | 7 Updating properties

    without generating new tiles
  8. Sam Matthews | December 8th, 2016 | 8 Update based

    on interaction
  9. Sam Matthews | December 8th, 2016 | 9

  10. Sam Matthews | December 8th, 2016 | 10

  11. Sam Matthews | December 8th, 2016 | 11 “Tileset”

  12. Sam Matthews | December 8th, 2016 | 12 What is

    a vector tile? A binary-encoded, gridded square containing layers, features of vector coordinates, and attributes unique to those features.
  13. Sam Matthews | December 8th, 2016 | 13 Anatomy •

    Google protocol buffers • Layers ◦ Features -> Geometry ◦ Keys & values ◦ Tags (reference keys/values)
  14. Sam Matthews | December 8th, 2016 | 14 Layers

  15. Sam Matthews | December 8th, 2016 | 15 Forest Grassland

    Features
  16. Sam Matthews | December 8th, 2016 | 16

  17. Sam Matthews | December 8th, 2016 | 17

  18. Sam Matthews | December 8th, 2016 | 18

  19. Sam Matthews | December 8th, 2016 | 19

  20. Sam Matthews | December 8th, 2016 | 20 Properties Dictionary

    encoded key/value pairs mapbox.com/vector-tiles/specification
  21. Sam Matthews | December 8th, 2016 | 21 Geometry

  22. Sam Matthews | December 8th, 2016 | 22 Geometry is

    encoded as a sequence of 32 bit unsigned integers https://www.mapbox.com/vector-tiles/specification/#encoding-geom
  23. Sam Matthews | December 8th, 2016 | 23 Mapbox Vector

    Tile Specification A specification for encoding tiled vector data. github.com/mapbox/vector-tile-spec
  24. Sam Matthews | December 8th, 2016 | 24

  25. Any geometry Sam Matthews | December 8th, 2016 | 25

  26. OGC Valid Geometry Sam Matthews | December 8th, 2016 |

    26
  27. Sam Matthews | December 8th, 2016 | 27 Encoding and

    decoding • Encoding Tools • Decoding tools • Styles • Example pipeline
  28. Sam Matthews | December 8th, 2016 | 28 Encoding Tools

    Mapnik (C++, Node.js) https://github.com/mapnik/node-mapnik Tippecanoe (C++ CLI) https://github.com/mapbox/tippecanoe Geojson-vt (Node.js) https://github.com/mapbox/geojson-vt Mapbox Vector Tile (Python) https://github.com/tilezen/mapbox-vector-tile
  29. Sam Matthews | December 8th, 2016 | 29 Decoding Tools

    vector-tile.js (Javascript) https://github.com/mapbox/vector-tile-js Vector tile (C++) https://github.com/mapbox/vector-tile Mapbox GL JS* (Javascript) https://github.com/mapbox/geojson-vt * also a WebGL rendering library [enter style specification]
  30. Sam Matthews | December 8th, 2016 | 30 Style specification

    Mapbox GL JS needs to know how to style the incoming vector tile data. The JSON specification defines these things.
  31. Sam Matthews | December 8th, 2016 | 31 Layers in

    the style spec can reference layers in the vector tiles. Mapbox GL JS interprets and renders.
  32. Sam Matthews | December 8th, 2016 | 32

  33. Sam Matthews | December 8th, 2016 | 33

  34. Sam Matthews | December 8th, 2016 | 34

  35. Sam Matthews | December 8th, 2016 | 35

  36. Sam Matthews | December 8th, 2016 | 36

  37. Sam Matthews | December 8th, 2016 | 37

  38. Sam Matthews | December 8th, 2016 | 38

  39. Sam Matthews | December 8th, 2016 | 39

  40. Sam Matthews | December 8th, 2016 | 40

  41. Sam Matthews | December 8th, 2016 | 41

  42. Sam Matthews | December 8th, 2016 | 42

  43. Sam Matthews | December 8th, 2016 | 43 Vector tiles

    and WebGL allow for larger datasets and powerful visualizations.
  44. Sam Matthews | December 8th, 2016 | 44

  45. Sam Matthews | December 8th, 2016 | 45

  46. Sam Matthews | December 8th, 2016 | 46 Data-driven styling

  47. Sam Matthews | December 8th, 2016 | 47 3D •

    Possible with vector tiles! But requires the right rendering library. • Mapbox extrusions were recently added to the style spec • Building heights from OSM now in Mapbox Streets vector tiles https://www.mapbox.com/blog/mapbox-studio-building-heights/
  48. Sam Matthews | December 8th, 2016 | 48

  49. Sam Matthews | December 8th, 2016 | 49

  50. Sam Matthews | December 8th, 2016 | 50 https://parallel.co.uk/3D/laei-no2/#13.88/51.5128/-0.2845/68.8/58

  51. Sam Matthews | December 8th, 2016 | 51 https://www.mapbox.com/blog/mapbox-unity-sdk/

  52. Sam Matthews | December 8th, 2016 | 52 github.com/mapbox/awesome-vector-tiles

  53. Sam Matthews | December 8th, 2016 | 53 Thanks! Sam

    Matthews [email protected] github.com/mapsam