Vector Tile Maps, Sam Matthews, Mapbox

ESIP Interoperability and Technology Committee "Tech Dives" Webinar

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