How Vector Maps Work (2019)

Transcript

1. how vector maps work Vladimir Agafonkin

2. None

3. April 2008

4. a typical GIS talk

5. rain.in.ua

6. so I’m doing maps now, how hard could this be?

7. None

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

12. None

13. creating a web map in 2008

14. None

15. You’re wasting time

16. None

17. building from scratch; didn’t tell anyone

18. None

19. Web Maps Lite

20. None
21. None

22. born as a protest against bloat, clutter and complexity

23. None
24. None
25. None
26. None
27. None
28. None
29. None
30. None
31. None
32. None

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:
38. None
39. None

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

43. None

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!

48. None
49. None
50. None
51. None
52. None
53. None
54. None

55. vector maps era

56. maps.me

57. why vector maps?

58. smooth zoom and rotation

59. None
60. None

61. 3D features

62. None
63. None
64. None

65. full control over data presentation in real time

66. None
67. None

68. any object on the map can be interactive

69. None
70. None

71. data-driven styling

72. None
73. None

74. real-time data analysis

75. None

76. mourner.github.io/ road-orientation-map

77. performance: rendering millions of features

78. None
79. None

80. visual map editor

81. mapbox.com/studio

82. None
83. None
84. None
85. None
86. None
87. None
88. None
89. None

90. less bandwidth

91. simulation vs cartography?

92. None
93. None

94. github.com/mapbox/ mapbox-gl-js (JS) github.com/mapbox/ mapbox-gl-native (C++14) iOS, Android, QT, Node,

    OSX, Linux, Windows
95. None
96. None

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

101. None

102. OpenGL: a technology for drawing triangles really fast

103. None

104. drawing lines

105. None

106. anti-aliasing

107. 6 triangles

108. vertex attributes

109. 2 triangles

110. line joins & line caps

111. None

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

118. None

119. SDF signed distance fields

120. None
121. None
122. None

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

127. None

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?

142. None

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