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

Mapbox GL: How vector maps work

6d07e6d95a43357254698ce9723350e6?s=47 Vladimir Agafonkin
November 01, 2017
Programming
0
160

Mapbox GL: How vector maps work

6d07e6d95a43357254698ce9723350e6?s=128

Vladimir Agafonkin

November 01, 2017
Tweet

More Decks by Vladimir Agafonkin

See All by Vladimir Agafonkin
6d07e6d95a43357254698ce9723350e6?s=48 mourner
0
1.3k
6d07e6d95a43357254698ce9723350e6?s=48 mourner
0
240
6d07e6d95a43357254698ce9723350e6?s=48 mourner
1
190
6d07e6d95a43357254698ce9723350e6?s=48 mourner
1
160
6d07e6d95a43357254698ce9723350e6?s=48 mourner
1
300
6d07e6d95a43357254698ce9723350e6?s=48 mourner
0
280
6d07e6d95a43357254698ce9723350e6?s=48 mourner
1
390
6d07e6d95a43357254698ce9723350e6?s=48 mourner
5
2.8k
6d07e6d95a43357254698ce9723350e6?s=48 mourner
10
3.2k

Other Decks in Programming

See All in Programming
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
110
A0aae1297a0593c1316abdcdb4131e3a?s=48 toedter
11
12k
9e840766611f942c7c0a9ad6987a5d78?s=48 kishida
1
510
102398563fd1bf878b35dc2d5ee67cbe?s=48 kamilahsantos
2
140
3331499a8c17bf14833f22b9173223f1?s=48 hanakla
1
150
08145ecb1ce091d9dd3c328ea2a707fb?s=48 tastapod
PRO
0
250
9c87ec93b3b2aff85a03d3b56e7b8db8?s=48 makoga
0
400
7166bc2cbc462ab5fd1987a76d0fe709?s=48 takahirom
1
430
Fd223ed912b754bc4c4338d148a69c78?s=48 kotaroooo0
13
4.4k
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
3
790
Ee785a00eb472c13d572139769a917e4?s=48 ryosogawa
0
350
80f7ecadd79bc55cfc05eef02a3bc867?s=48 makky0620
0
340

Featured

See All Featured
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.8k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
116
10k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
109
11k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
61k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
370
42k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
201
9.8k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
2k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
146
19k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
208
10k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.9k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.7k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
311
17k

Transcript

  1. how vector maps work Vladimir Agafonkin 24.08.2016 GL

  2. None
  3. None

  4. the new era of interactive cartography

  5. raster tiles era

  6. OpenLayers 2

  7. vector maps era

  8. MAPS.ME

  9. GL

  10. open source

  11. platform for mobile devices and browsers

  12. based on open data

  13. why vector maps?

  14. smooth zoom and rotation

  15. ~

  16. None
  17. None

  18. perspective view, 3D capabilities

  19. None
  20. None
  21. None

  22. data-driven styling

  23. None
  24. None

  25. full control over data presentation in real time

  26. None
  27. None

  28. any object on the map can be interactive

  29. None
  30. None
  31. None

  32. performance: rendering millions of features

  33. simulation vs cartography?

  34. visual map editor

  35. mapbox.com/studio

  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None

  44. video on maps

  45. None

  46. less bandwidth

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

    Linux, Node
  48. None
  49. None

  50. why WebGL isn’t everywhere yet?

  51. developing a GL-based platform

  52. OpenGL — 3D API?

  53. OpenGL is a low-level 2D API

  54. None

  55. OpenGL: a technology for drawing triangles really fast

  56. None

  57. vertex shader transforms coordinates

  58. fragment shader transforms pixel color

  59. drawing lines

  60. None

  61. anti-aliasing

  62. 6 triangles

  63. vertex attributes

  64. 2 triangles

  65. line joins & line caps

  66. None

  67. drawing polygons

  68. triangulation

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

  70. drawing text

  71. font textures

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

  73. None

  74. SDF signed distance fields

  75. None
  76. None
  77. None

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

  79. mapbox/tiny-sdf

  80. None

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

    mapbox-gl-rtl-text

  82. loading and processing data

  83. None

  84. Protocol Buffers compact binary data serialization format

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

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

    JSON.parse

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

  88. None

  89. placing labels

  90. None
  91. None

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

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

  94. ~

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

  96. point clustering

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

  98. None

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

    data processing loading data

  100. vector style specification

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

  102. mapbox.com/studio

  103. None

  104. Mapbox GL Native C++11 + Android, iOS, macOS, Qt, Node

    bindings github.com/mapbox/ mapbox-gl-native

  105. rendering tests

  106. mapbox/mapbox-gl-test-suite

  107. None

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

  109. AppVeyor

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

    Browserify

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

  112. None
  113. None