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
340
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
460
How Vector Maps Work (2019)
mourner
1
420
Fast by default: everyday algorithmic thinking for developers [RU]
mourner
1
360
Fast by default: everyday algorithmic thinking for developers
mourner
1
450
Random cool stuff I've been hacking on (mostly spatial indices)
mourner
0
520
Как работают современные интерактивные карты на WebGL
mourner
1
490
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
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
780
バッチを作らなきゃとなったときに考えること
irof
0
390
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
660
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
480
Domain-Driven Transformation
hschwentner
2
1.9k
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
3
1.7k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
830
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
91
5.8k
Scaling GitHub
holman
459
140k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Code Review Best Practice
trishagee
67
18k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Being A Developer After 40
akosma
89
590k
RailsConf 2023
tenderlove
29
1k
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