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. 1.

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

    Maps Sam Matthews - Mapbox Interoperability and Technology/Tech Dive Webinar Series
  2. 3.

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

    why vector tiles? • anatomy (the specification) • encoding & decoding (a pipeline) • styling • 3D
  3. 4.

    Sam Matthews | December 8th, 2016 | 4 Why vector

    tiles? • Enable WebGL • Styles are first class citizens • Cost savings (make the browser do work)
  4. 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.
  5. 13.

    Sam Matthews | December 8th, 2016 | 13 Anatomy •

    Google protocol buffers • Layers ◦ Features -> Geometry ◦ Keys & values ◦ Tags (reference keys/values)
  6. 20.

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

    encoded key/value pairs mapbox.com/vector-tiles/specification
  7. 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
  8. 23.

    Sam Matthews | December 8th, 2016 | 23 Mapbox Vector

    Tile Specification A specification for encoding tiled vector data. github.com/mapbox/vector-tile-spec
  9. 27.

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

    decoding • Encoding Tools • Decoding tools • Styles • Example pipeline
  10. 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
  11. 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]
  12. 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.
  13. 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.
  14. 43.

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

    and WebGL allow for larger datasets and powerful visualizations.
  15. 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/
  16. 53.

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

    Matthews sam@mapbox.com github.com/mapsam