Mapbox GL: How vector maps work

Transcript

1. how vector maps work Vladimir Agafonkin 24.08.2016 GL
4. the new era of interactive cartography
5. raster tiles era
6. OpenLayers 2
7. vector maps era
8. MAPS.ME
9. GL
10. open source
11. platform for mobile devices and browsers
12. based on open data
13. why vector maps?
14. smooth zoom and rotation
15. ~
18. perspective view, 3D capabilities
22. data-driven styling
25. full control over data presentation in real time
28. any object on the map can be interactive
32. performance: rendering millions of features
33. simulation vs cartography?
34. visual map editor
35. mapbox.com/studio
44. video on maps
46. less bandwidth
47. github.com/mapbox/ mapbox-gl-js (JS) github.com/mapbox/ mapbox-gl-native (C++14) iOS, Android, QT, OSX, Linux, Node
50. why WebGL isn’t everywhere yet?
51. developing a GL-based platform
52. OpenGL — 3D API?
53. OpenGL is a low-level 2D API
55. OpenGL: a technology for drawing triangles really fast
57. vertex shader transforms coordinates
58. fragment shader transforms pixel color
59. drawing lines
61. anti-aliasing
62. 6 triangles
63. vertex attributes
64. 2 triangles
65. line joins & line caps
67. drawing polygons
68. triangulation
69. github.com/mapbox/earcut (JS) github.com/mapbox/earcut.hpp (C++)
70. drawing text
71. font textures
72. unicode-intervals /Arial Regular/0-255.pbf /Arial Regular/256-511.pbf /Arial Regular/512-767.pbf
74. SDF signed distance fields
78. mapbox/shelf-pack (JS) mapbox/shelf-pack-cpp (C++)
79. mapbox/tiny-sdf
81. icu4c C + Emscripten = JavaScript coming soon: WebAssembly github.com/mapbox/ mapbox-gl-rtl-text
82. loading and processing data
84. Protocol Buffers compact binary data serialization format
85. /mapbox/pbf (JS) /mapbox/protozero (C++) Protocol Buffers
86. 3-4 times smaller than JSON (gzip) 6-7 times faster than JSON.parse
87. github.com/mapbox/ vector-tile-spec
89. placing labels
92. github.com/mapbox/grid-index github.com/mourner/rbush
93. dynamically loading 3rd-party data on the client
94. ~
95. mapbox/geojson-vt (JS) mapbox/geojson-vt-cpp (C++)
96. point clustering
97. mapbox/supercluster (JS) mapbox/supercluter-hpp (C++)
99. main thread (UI) processing loading data web workers processing loading data processing loading data
100. vector style specification
101. github.com/mapbox/ mapbox-gl-style-spec
102. mapbox.com/studio
104. Mapbox GL Native C++11 + Android, iOS, macOS, Qt, Node bindings github.com/mapbox/ mapbox-gl-native
105. rendering tests
106. mapbox/mapbox-gl-test-suite
108. mapbox/pixelmatch (JS) mapbox/pixelmatch-cpp (C++) screenshot comparison with anti-aliasing detection
109. AppVeyor
110. JS development tools ES6 + Bublé ESLint Tap + Nyc Browserify
111. hey, what’s there on the server side?