How Vector Maps Work (2019)

1. how vector maps work Vladimir Agafonkin
3. April 2008
4. a typical GIS talk
5. rain.in.ua
6. so I’m doing maps now, how hard could this be?
8. maps huh? •a bunch of square pictures •drag them with a mouse •put some icons on top
9. PFF
10. Let’s build a mapping library from scratch!
11. no way you could do that
13. creating a web map in 2008
15. You’re wasting time
17. building from scratch; didn’t tell anyone
19. Web Maps Lite
22. born as a protest against bloat, clutter and complexity
33. the number one mapping library in the world* *because the guy didn’t know shit about maps
34. •extremely lightweight and simple •extremely easy to get started •huge community, tons of plugins •stable as a mountain •works everywhere (i.e. legacy browsers)
35. raster tiles era
36. OpenLayers
37. • maps as background • mostly static • top-down, north-oriented • a rigid set of zoom levels • some simple vectors/icons on top • conceptually the same as 14 years ago Web maps status quo:
40. Mapbox vision for maps: living, breathing, fluid, rich, powerful experiences that make you feel connected to the world Games did it for decades; why not maps?
41. Evolution of The Elder Scrolls 2002 2006 2011
42. Evolution of web maps 2002 2006 2011
44. Digital maps before: exclusively web tech Digital maps now: native mobile apps + web
45. Browsers before: display a bunch of text and images Browsers now: anything is possible
46. vector maps raster maps
47. let’s build a vector maps platform from scratch!
55. vector maps era
56. maps.me
57. why vector maps?
58. smooth zoom and rotation
61. 3D features
65. full control over data presentation in real time
68. any object on the map can be interactive
71. data-driven styling
74. real-time data analysis
76. mourner.github.io/ road-orientation-map
77. performance: rendering millions of features
80. visual map editor
81. mapbox.com/studio
90. less bandwidth
91. simulation vs cartography?
94. github.com/mapbox/ mapbox-gl-js (JS) github.com/mapbox/ mapbox-gl-native (C++14) iOS, Android, QT, Node, OSX, Linux, Windows
97. why isn’t WebGL everywhere yet?
98. Let’s build something with OpenGL!
99. OpenGL — 3D API?
100. OpenGL is a low-level 2D API
102. OpenGL: a technology for drawing triangles really fast
104. drawing lines
106. anti-aliasing
107. 6 triangles
108. vertex attributes
109. 2 triangles
110. line joins & line caps
112. drawing polygons
113. drawing polygons
114. github.com/mapbox/earcut (JS) github.com/mapbox/earcut.hpp (C++)
115. drawing text
116. font textures
117. unicode-intervals /Arial Regular/0-255.pbf /Arial Regular/256-511.pbf /Arial Regular/512-767.pbf
119. SDF signed distance fields
123. github.com/mapbox/potpack
124. mapbox/tiny-sdf
125. mapbox/ mapbox-gl-rtl-text icu4c C + Emscripten = JavaScript coming soon: WebAssembly
126. placing labels
128. mourner/rbush mourner/rbush-knn mourner/kdbush mourner/flatbush mourner/geokdbush mourner/geoflatbush
129. loading and processing data
130. mapbox/pbf (JS) mapbox/protozero (C++)
131. 6-7 times faster than JSON.parse Protocol Buffers: 3-4 times smaller than JSON (gzip)
132. github.com/mapbox/ vector-tile-spec
133. mapbox/geojson-vt (JS) mapbox/geojson-vt-cpp (C++)
134. mapbox/supercluster (JS) mapbox/supercluster-hpp (C++)
135. mapbox/polylabel (JS, C++)
136. main thread (UI) processing loading data web workers processing loading data processing loading data
137. continuous testing
138. 1082 render tests
139. mapbox/pixelmatch (JS) mapbox/pixelmatch-cpp (C++)
140. AppVeyor
141. hey, what’s there on the server side?
143. the essence of software engineering is mitigation of complexity
144. vastly bigger scope, same goal: let people build amazing maps
145. Díky moc! agafonkin.com