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
370
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
500
How Vector Maps Work (2019)
mourner
1
440
Fast by default: everyday algorithmic thinking for developers [RU]
mourner
1
390
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.2k
Other Decks in Programming
See All in Programming
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
2
1.9k
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
370
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
170
漸進。
ssssota
0
1.6k
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
100
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
670
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
120
GoのWebAssembly活用パターン紹介
syumai
2
950
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
490
20250528 AWS Startupイベント登壇資料:AIコーディングの取り組み
procrustes5
0
140
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
120
Interface vs Types ~型推論が過多推論~
hirokiomote
1
240
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
2
110
Rails Girls Zürich Keynote
gr2m
94
13k
Gamification - CAS2011
davidbonilla
81
5.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Speed Design
sergeychernyshev
30
980
It's Worth the Effort
3n
184
28k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Side Projects
sachag
454
42k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
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