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
400
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
2.1k
Fast by Default: Algorithmic Optimization in Practice (JSCamp 2019)
mourner
0
520
How Vector Maps Work (2019)
mourner
1
460
Fast by default: everyday algorithmic thinking for developers [RU]
mourner
1
410
Fast by default: everyday algorithmic thinking for developers
mourner
1
480
Random cool stuff I've been hacking on (mostly spatial indices)
mourner
0
580
Как работают современные интерактивные карты на 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
Reading Rails 1.0 Source Code
okuramasafumi
0
110
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
アセットのコンパイルについて
ojun9
0
120
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
rage against annotate_predecessor
junk0612
0
170
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Producing Creativity
orderedlist
PRO
347
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The Language of Interfaces
destraynor
161
25k
Designing for Performance
lara
610
69k
What's in a price? How to price your products and services
michaelherold
246
12k
Typedesign – Prime Four
hannesfritz
42
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