Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mapbox GL: How vector maps work
Search
Vladimir Agafonkin
November 01, 2017
Programming
0
380
Mapbox GL: How vector maps work
Vladimir Agafonkin
November 01, 2017
Tweet
Share
More Decks by Vladimir Agafonkin
See All by Vladimir Agafonkin
Fast by Default: Algorithmic Optimization in Practice (dotJS 2019)
mourner
0
2k
Fast by Default: Algorithmic Optimization in Practice (JSCamp 2019)
mourner
0
510
How Vector Maps Work (2019)
mourner
1
450
Fast by default: everyday algorithmic thinking for developers [RU]
mourner
1
400
Fast by default: everyday algorithmic thinking for developers
mourner
1
470
Random cool stuff I've been hacking on (mostly spatial indices)
mourner
0
560
Как работают современные интерактивные карты на WebGL
mourner
1
510
Leaflet, WebGL & the Future of Web Mapping
mourner
5
3.3k
How Simplicity Will Save GIS
mourner
10
4.3k
Other Decks in Programming
See All in Programming
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
230
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
830
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
150
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
150
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
150
NPOでのDevinの活用
codeforeveryone
0
870
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
660
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
VS Code Update for GitHub Copilot
74th
2
660
What's new in AppKit on macOS 26
1024jp
0
130
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.5k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Cult of Friendly URLs
andyhume
79
6.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to train your dragon (web standard)
notwaldorf
96
6.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Adopting Sorbet at Scale
ufuk
77
9.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making Projects Easy
brettharned
116
6.3k
Transcript
how vector maps work Vladimir Agafonkin 24.08.2016 GL
None
None
the new era of interactive cartography
raster tiles era
OpenLayers 2
vector maps era
MAPS.ME
GL
open source
platform for mobile devices and browsers
based on open data
why vector maps?
smooth zoom and rotation
~
None
None
perspective view, 3D capabilities
None
None
None
data-driven styling
None
None
full control over data presentation in real time
None
None
any object on the map can be interactive
None
None
None
performance: rendering millions of features
simulation vs cartography?
visual map editor
mapbox.com/studio
None
None
None
None
None
None
None
None
video on maps
None
less bandwidth
github.com/mapbox/ mapbox-gl-js (JS) github.com/mapbox/ mapbox-gl-native (C++14) iOS, Android, QT, OSX,
Linux, Node
None
None
why WebGL isn’t everywhere yet?
developing a GL-based platform
OpenGL — 3D API?
OpenGL is a low-level 2D API
None
OpenGL: a technology for drawing triangles really fast
None
vertex shader transforms coordinates
fragment shader transforms pixel color
drawing lines
None
anti-aliasing
6 triangles
vertex attributes
2 triangles
line joins & line caps
None
drawing polygons
triangulation
github.com/mapbox/earcut (JS) github.com/mapbox/earcut.hpp (C++)
drawing text
font textures
unicode-intervals /Arial Regular/0-255.pbf /Arial Regular/256-511.pbf /Arial Regular/512-767.pbf
None
SDF signed distance fields
None
None
None
mapbox/shelf-pack (JS) mapbox/shelf-pack-cpp (C++)
mapbox/tiny-sdf
None
icu4c C + Emscripten = JavaScript coming soon: WebAssembly github.com/mapbox/
mapbox-gl-rtl-text
loading and processing data
None
Protocol Buffers compact binary data serialization format
/mapbox/pbf (JS) /mapbox/protozero (C++) Protocol Buffers
3-4 times smaller than JSON (gzip) 6-7 times faster than
JSON.parse
github.com/mapbox/ vector-tile-spec
None
placing labels
None
None
github.com/mapbox/grid-index github.com/mourner/rbush
dynamically loading 3rd-party data on the client
~
mapbox/geojson-vt (JS) mapbox/geojson-vt-cpp (C++)
point clustering
mapbox/supercluster (JS) mapbox/supercluter-hpp (C++)
None
main thread (UI) processing loading data web workers processing loading
data processing loading data
vector style specification
github.com/mapbox/ mapbox-gl-style-spec
mapbox.com/studio
None
Mapbox GL Native C++11 + Android, iOS, macOS, Qt, Node
bindings github.com/mapbox/ mapbox-gl-native
rendering tests
mapbox/mapbox-gl-test-suite
None
mapbox/pixelmatch (JS) mapbox/pixelmatch-cpp (C++) screenshot comparison with anti-aliasing detection
AppVeyor
JS development tools ES6 + Bublé ESLint Tap + Nyc
Browserify
hey, what’s there on the server side?
None
None