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 full-size slide

  2. a typical GIS talk

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. no way you could do that

    View full-size slide

  7. creating a web map in 2008

    View full-size slide

  8. You’re wasting time

    View full-size slide

  9. building from scratch;
    didn’t tell anyone

    View full-size slide

  10. Web Maps Lite

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. •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 full-size slide

  14. raster tiles era

    View full-size slide

  15. • 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 full-size slide

  16. 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 full-size slide

  17. Evolution of The Elder Scrolls
    2002 2006 2011

    View full-size slide

  18. Evolution of web maps
    2002 2006 2011

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. vector
    maps
    raster
    maps

    View full-size slide

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

    View full-size slide

  23. vector
    maps era

    View full-size slide

  24. why
    vector maps?

    View full-size slide

  25. smooth zoom
    and rotation

    View full-size slide

  26. full control over
    data presentation
    in real time

    View full-size slide

  27. any object on the
    map can be
    interactive

    View full-size slide

  28. data-driven styling

    View full-size slide

  29. real-time
    data analysis

    View full-size slide

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

    View full-size slide

  31. performance:
    rendering millions
    of features

    View full-size slide

  32. visual
    map editor

    View full-size slide

  33. mapbox.com/studio

    View full-size slide

  34. less bandwidth

    View full-size slide

  35. simulation
    vs
    cartography?

    View full-size slide

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

    View full-size slide

  37. why isn’t WebGL
    everywhere yet?

    View full-size slide

  38. Let’s build something with OpenGL!

    View full-size slide

  39. OpenGL — 3D API?

    View full-size slide

  40. OpenGL is a
    low-level 2D API

    View full-size slide

  41. OpenGL:
    a technology for
    drawing triangles
    really fast

    View full-size slide

  42. drawing
    lines

    View full-size slide

  43. anti-aliasing

    View full-size slide

  44. vertex attributes

    View full-size slide

  45. line joins & line caps

    View full-size slide

  46. drawing
    polygons

    View full-size slide

  47. drawing polygons

    View full-size slide

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

    View full-size slide

  49. drawing text

    View full-size slide

  50. font textures

    View full-size slide

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

    View full-size slide

  52. SDF
    signed distance
    fields

    View full-size slide

  53. github.com/mapbox/potpack

    View full-size slide

  54. mapbox/tiny-sdf

    View full-size slide

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

    View full-size slide

  56. placing labels

    View full-size slide

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

    View full-size slide

  58. loading and
    processing data

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. continuous
    testing

    View full-size slide

  67. 1082 render tests

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. the essence of
    software engineering is
    mitigation of complexity

    View full-size slide

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

    View full-size slide

  72. Díky moc!
    agafonkin.com

    View full-size slide