How Vector Maps Work (2019)

How Vector Maps Work (2019)

6d07e6d95a43357254698ce9723350e6?s=128

Vladimir Agafonkin

April 08, 2019
Tweet

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