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

Mapbox GL: How vector maps work

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Vladimir Agafonkin Vladimir Agafonkin
November 01, 2017
Programming
470
0

Mapbox GL: How vector maps work

Avatar for Vladimir Agafonkin

Vladimir Agafonkin

November 01, 2017

More Decks by Vladimir Agafonkin

See All by Vladimir Agafonkin
Fast by Default: Algorithmic Optimization in Practice (dotJS 2019)
Avatar for Vladimir Agafonkin mourner
0
2.2k
Fast by Default: Algorithmic Optimization in Practice (JSCamp 2019)
Avatar for Vladimir Agafonkin mourner
0
660
How Vector Maps Work (2019)
Avatar for Vladimir Agafonkin mourner
1
500
Fast by default: everyday algorithmic thinking for developers [RU]
Avatar for Vladimir Agafonkin mourner
1
560
Fast by default: everyday algorithmic thinking for developers
Avatar for Vladimir Agafonkin mourner
1
520
Random cool stuff I've been hacking on (mostly spatial indices)
Avatar for Vladimir Agafonkin mourner
0
610
Как работают современные интерактивные карты на WebGL
Avatar for Vladimir Agafonkin mourner
1
550
Leaflet, WebGL & the Future of Web Mapping
Avatar for Vladimir Agafonkin mourner
5
3.5k
How Simplicity Will Save GIS
Avatar for Vladimir Agafonkin mourner
10
4.4k

Other Decks in Programming

See All in Programming
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
Avatar for ternbusty ternbusty
1
130
ビジネスモデルから紐解く、AI+型駆動開発
Avatar for Hiroki Omote hirokiomote
2
5.1k
技術記事、AIに書かせるか、自分で書くか？ 〜それでも私が自分の手で書く理由〜 / #QiitaConference
Avatar for Junichi Ito jnchito
2
1.2k
RailsTokyo 2026#4: AI様があれば、
Hotwireの弱点は消えるか？
Avatar for Naofumi Kagami naofumi
5
1k
Why Laravel apps break—Mastering the fundamentals to keep them maintainable
Avatar for 武田 憲太郎 kentaroutakeda
1
330
Oxlintのカスタムルールの現況
Avatar for syumai syumai
5
940
フロントエンドとバックエンドで「1文字」を揃えよう
Avatar for てきめん tekimen youkidearitai
PRO
0
120
LLM Plugin for Node-REDの利用方法と開発について
Avatar for 404background 404background
0
150
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
2
1.5k
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
1
600
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
530
今さら聞けないCancellationToken
Avatar for tkym htkym
0
210

Featured

See All Featured
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.5k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
560
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k
Done Done
Avatar for chrislema chrislema
186
16k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
130
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
440
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
310
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
55k

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