Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How Vector Maps Work (2019)

How Vector Maps Work (2019)

Vladimir Agafonkin

April 08, 2019
Tweet

More Decks by Vladimir Agafonkin

Other Decks in Programming

Transcript

  1. how
    vector maps
    work
    Vladimir Agafonkin

    View Slide

  2. View Slide

  3. April 2008

    View Slide

  4. a typical GIS talk

    View Slide

  5. rain.in.ua

    View Slide

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

    View Slide

  7. View Slide

  8. maps huh?
    •a bunch of square pictures
    •drag them with a mouse
    •put some icons on top

    View Slide

  9. PFF

    View Slide

  10. Let’s build a
    mapping library
    from scratch!

    View Slide

  11. no way you could do that

    View Slide

  12. View Slide

  13. creating a web map in 2008

    View Slide

  14. View Slide

  15. You’re wasting time

    View Slide

  16. View Slide

  17. building from scratch;
    didn’t tell anyone

    View Slide

  18. View Slide

  19. Web Maps Lite

    View Slide

  20. View Slide

  21. View Slide

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

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. the number one mapping
    library in the world*
    *because the guy didn’t know shit about maps

    View Slide

  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)

    View Slide

  35. raster tiles era

    View Slide

  36. OpenLayers

    View Slide

  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:

    View Slide

  38. View Slide

  39. View Slide

  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?

    View Slide

  41. Evolution of The Elder Scrolls
    2002 2006 2011

    View Slide

  42. Evolution of web maps
    2002 2006 2011

    View Slide

  43. View Slide

  44. Digital maps before:
    exclusively web tech
    Digital maps now:
    native mobile apps + web

    View Slide

  45. Browsers before:
    display a bunch of text and images
    Browsers now:
    anything is possible

    View Slide

  46. vector
    maps
    raster
    maps

    View Slide

  47. let’s build a
    vector maps platform
    from scratch!

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. vector
    maps era

    View Slide

  56. maps.me

    View Slide

  57. why
    vector maps?

    View Slide

  58. smooth zoom
    and rotation

    View Slide

  59. View Slide

  60. View Slide

  61. 3D features

    View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. full control over
    data presentation
    in real time

    View Slide

  66. View Slide

  67. View Slide

  68. any object on the
    map can be
    interactive

    View Slide

  69. View Slide

  70. View Slide

  71. data-driven styling

    View Slide

  72. View Slide

  73. View Slide

  74. real-time
    data analysis

    View Slide

  75. View Slide

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

    View Slide

  77. performance:
    rendering millions
    of features

    View Slide

  78. View Slide

  79. View Slide

  80. visual
    map editor

    View Slide

  81. mapbox.com/studio

    View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. View Slide

  88. View Slide

  89. View Slide

  90. less bandwidth

    View Slide

  91. simulation
    vs
    cartography?

    View Slide

  92. View Slide

  93. View Slide

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

    View Slide

  95. View Slide

  96. View Slide

  97. why isn’t WebGL
    everywhere yet?

    View Slide

  98. Let’s build something with OpenGL!

    View Slide

  99. OpenGL — 3D API?

    View Slide

  100. OpenGL is a
    low-level 2D API

    View Slide

  101. View Slide

  102. OpenGL:
    a technology for
    drawing triangles
    really fast

    View Slide

  103. View Slide

  104. drawing
    lines

    View Slide

  105. View Slide

  106. anti-aliasing

    View Slide

  107. 6 triangles

    View Slide

  108. vertex attributes

    View Slide

  109. 2 triangles

    View Slide

  110. line joins & line caps

    View Slide

  111. View Slide

  112. drawing
    polygons

    View Slide

  113. drawing polygons

    View Slide

  114. github.com/mapbox/earcut (JS)
    github.com/mapbox/earcut.hpp (C++)

    View Slide

  115. drawing text

    View Slide

  116. font textures

    View Slide

  117. unicode-intervals
    /Arial Regular/0-255.pbf
    /Arial Regular/256-511.pbf
    /Arial Regular/512-767.pbf

    View Slide

  118. View Slide

  119. SDF
    signed distance
    fields

    View Slide

  120. View Slide

  121. View Slide

  122. View Slide

  123. github.com/mapbox/potpack

    View Slide

  124. mapbox/tiny-sdf

    View Slide

  125. mapbox/
    mapbox-gl-rtl-text
    icu4c
    C + Emscripten = JavaScript
    coming soon: WebAssembly

    View Slide

  126. placing labels

    View Slide

  127. View Slide

  128. mourner/rbush
    mourner/rbush-knn
    mourner/kdbush
    mourner/flatbush
    mourner/geokdbush
    mourner/geoflatbush

    View Slide

  129. loading and
    processing data

    View Slide

  130. mapbox/pbf (JS)
    mapbox/protozero (C++)

    View Slide

  131. 6-7 times faster
    than JSON.parse
    Protocol Buffers:
    3-4 times smaller
    than JSON (gzip)

    View Slide

  132. github.com/mapbox/
    vector-tile-spec

    View Slide

  133. mapbox/geojson-vt (JS)
    mapbox/geojson-vt-cpp (C++)

    View Slide

  134. mapbox/supercluster (JS)
    mapbox/supercluster-hpp (C++)

    View Slide

  135. mapbox/polylabel (JS, C++)

    View Slide

  136. main thread (UI)
    processing
    loading data
    web workers
    processing
    loading data
    processing
    loading data

    View Slide

  137. continuous
    testing

    View Slide

  138. 1082 render tests

    View Slide

  139. mapbox/pixelmatch (JS)
    mapbox/pixelmatch-cpp (C++)

    View Slide

  140. AppVeyor

    View Slide

  141. hey, what’s there
    on the server side?

    View Slide

  142. View Slide

  143. the essence of
    software engineering is
    mitigation of complexity

    View Slide

  144. vastly bigger scope,
    same goal:
    let people build
    amazing maps

    View Slide

  145. Díky moc!
    agafonkin.com

    View Slide