$30 off During Our Annual Pro Sale. View Details »

Mapbox GL: How vector maps work

Mapbox GL: How vector maps work

Vladimir Agafonkin

November 01, 2017
Tweet

More Decks by Vladimir Agafonkin

Other Decks in Programming

Transcript

  1. how vector maps work
    Vladimir Agafonkin
    24.08.2016
    GL

    View Slide

  2. View Slide

  3. View Slide

  4. the new era of
    interactive
    cartography

    View Slide

  5. raster tiles era

    View Slide

  6. OpenLayers 2

    View Slide

  7. vector
    maps era

    View Slide

  8. MAPS.ME

    View Slide

  9. GL

    View Slide

  10. open source

    View Slide

  11. platform for
    mobile devices
    and browsers

    View Slide

  12. based on
    open data

    View Slide

  13. why vector
    maps?

    View Slide

  14. smooth zoom
    and rotation

    View Slide

  15. ~

    View Slide

  16. View Slide

  17. View Slide

  18. perspective view,
    3D capabilities

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. data-driven styling

    View Slide

  23. View Slide

  24. View Slide

  25. full control over
    data presentation
    in real time

    View Slide

  26. View Slide

  27. View Slide

  28. any object on
    the map can be
    interactive

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. performance:
    rendering millions
    of features

    View Slide

  33. simulation
    vs
    cartography?

    View Slide

  34. visual map
    editor

    View Slide

  35. mapbox.com/studio

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. video on maps

    View Slide

  45. View Slide

  46. less bandwidth

    View Slide

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

    View Slide

  48. View Slide

  49. View Slide

  50. why WebGL isn’t
    everywhere yet?

    View Slide

  51. developing a GL-based platform

    View Slide

  52. OpenGL — 3D API?

    View Slide

  53. OpenGL is a
    low-level 2D API

    View Slide

  54. View Slide

  55. OpenGL:
    a technology for
    drawing triangles
    really fast

    View Slide

  56. View Slide

  57. vertex shader
    transforms coordinates

    View Slide

  58. fragment shader
    transforms pixel color

    View Slide

  59. drawing
    lines

    View Slide

  60. View Slide

  61. anti-aliasing

    View Slide

  62. 6 triangles

    View Slide

  63. vertex attributes

    View Slide

  64. 2 triangles

    View Slide

  65. line joins & line caps

    View Slide

  66. View Slide

  67. drawing
    polygons

    View Slide

  68. triangulation

    View Slide

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

    View Slide

  70. drawing text

    View Slide

  71. font textures

    View Slide

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

    View Slide

  73. View Slide

  74. SDF
    signed distance
    fields

    View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. mapbox/shelf-pack (JS)
    mapbox/shelf-pack-cpp (C++)

    View Slide

  79. mapbox/tiny-sdf

    View Slide

  80. View Slide

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

    View Slide

  82. loading and
    processing data

    View Slide

  83. View Slide

  84. Protocol Buffers
    compact binary data
    serialization format

    View Slide

  85. /mapbox/pbf (JS)
    /mapbox/protozero (C++)
    Protocol Buffers

    View Slide

  86. 3-4 times smaller
    than JSON (gzip)
    6-7 times faster
    than JSON.parse

    View Slide

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

    View Slide

  88. View Slide

  89. placing labels

    View Slide

  90. View Slide

  91. View Slide

  92. github.com/mapbox/grid-index
    github.com/mourner/rbush

    View Slide

  93. dynamically loading
    3rd-party data
    on the client

    View Slide

  94. ~

    View Slide

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

    View Slide

  96. point
    clustering

    View Slide

  97. mapbox/supercluster (JS)
    mapbox/supercluter-hpp (C++)

    View Slide

  98. View Slide

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

    View Slide

  100. vector style
    specification

    View Slide

  101. github.com/mapbox/
    mapbox-gl-style-spec

    View Slide

  102. mapbox.com/studio

    View Slide

  103. View Slide

  104. Mapbox GL Native
    C++11
    + Android, iOS, macOS,
    Qt, Node bindings
    github.com/mapbox/
    mapbox-gl-native

    View Slide

  105. rendering tests

    View Slide

  106. mapbox/mapbox-gl-test-suite

    View Slide

  107. View Slide

  108. mapbox/pixelmatch (JS)
    mapbox/pixelmatch-cpp (C++)
    screenshot comparison
    with anti-aliasing detection

    View Slide

  109. AppVeyor

    View Slide

  110. JS development tools
    ES6 + Bublé
    ESLint
    Tap + Nyc Browserify

    View Slide

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

    View Slide

  112. View Slide

  113. View Slide