Vector Tile Maps, Sam Matthews, Mapbox

Vector Tile Maps, Sam Matthews, Mapbox

ESIP Interoperability and Technology Committee "Tech Dives" Webinar

1bfb948b87cd5766db6ceac17d854d62?s=128

ESIP Federation

December 08, 2016
Tweet

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 sam@mapbox.com github.com/mapsam