Mapbox GL: How vector maps work

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