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
350
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
470
How Vector Maps Work (2019)
mourner
1
430
Fast by default: everyday algorithmic thinking for developers [RU]
mourner
1
370
Fast by default: everyday algorithmic thinking for developers
mourner
1
460
Random cool stuff I've been hacking on (mostly spatial indices)
mourner
0
530
Как работают современные интерактивные карты на WebGL
mourner
1
500
Leaflet, WebGL & the Future of Web Mapping
mourner
5
3.3k
How Simplicity Will Save GIS
mourner
10
4.2k
Other Decks in Programming
See All in Programming
The Weight of Data: Rethinking Cloud-Native Systems for the Age of AI
hollycummins
0
260
Kamal 2 – Get Out of the Cloud
aleksandrov
1
170
Develop Faster With FrankenPHP
dunglas
2
3.2k
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
150
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
150
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
540
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
9
4.5k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.6k
SQL Server ベクトル検索
odashinsuke
0
160
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.5k
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
310
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Cult of Friendly URLs
andyhume
78
6.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
A Tale of Four Properties
chriscoyier
158
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Gamification - CAS2011
davidbonilla
81
5.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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