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
How Vector Maps Work (2019)
Search
Vladimir Agafonkin
April 08, 2019
Programming
1
450
How Vector Maps Work (2019)
Vladimir Agafonkin
April 08, 2019
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
Fast by default: everyday algorithmic thinking for developers [RU]
mourner
1
400
Fast by default: everyday algorithmic thinking for developers
mourner
1
470
Mapbox GL: How vector maps work
mourner
0
380
Random cool stuff I've been hacking on (mostly spatial indices)
mourner
0
570
Как работают современные интерактивные карты на 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
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
26
8k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
780
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
320
GPUを計算資源として使おう!
primenumber
1
290
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
110
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
1
480
iOS開発スターターキットの作り方
akidon0000
0
170
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
190
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
630
効率的な開発手段として VRTを活用する
ishkawa
1
180
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Tale of Four Properties
chriscoyier
160
23k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Music & Morning Musume
bryan
46
6.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Faster Mobile Websites
deanohume
308
31k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
how vector maps work Vladimir Agafonkin
None
April 2008
a typical GIS talk
rain.in.ua
so I’m doing maps now, how hard could this be?
None
maps huh? •a bunch of square pictures •drag them with
a mouse •put some icons on top
PFF
Let’s build a mapping library from scratch!
no way you could do that
None
creating a web map in 2008
None
You’re wasting time
None
building from scratch; didn’t tell anyone
None
Web Maps Lite
None
None
born as a protest against bloat, clutter and complexity
None
None
None
None
None
None
None
None
None
None
the number one mapping library in the world* *because the
guy didn’t know shit about maps
•extremely lightweight and simple •extremely easy to get started •huge
community, tons of plugins •stable as a mountain •works everywhere (i.e. legacy browsers)
raster tiles era
OpenLayers
• maps as background • mostly static • top-down, north-oriented
• a rigid set of zoom levels • some simple vectors/icons on top • conceptually the same as 14 years ago Web maps status quo:
None
None
Mapbox vision for maps: living, breathing, fluid, rich, powerful experiences
that make you feel connected to the world Games did it for decades; why not maps?
Evolution of The Elder Scrolls 2002 2006 2011
Evolution of web maps 2002 2006 2011
None
Digital maps before: exclusively web tech Digital maps now: native
mobile apps + web
Browsers before: display a bunch of text and images Browsers
now: anything is possible
vector maps raster maps
let’s build a vector maps platform from scratch!
None
None
None
None
None
None
None
vector maps era
maps.me
why vector maps?
smooth zoom and rotation
None
None
3D features
None
None
None
full control over data presentation in real time
None
None
any object on the map can be interactive
None
None
data-driven styling
None
None
real-time data analysis
None
mourner.github.io/ road-orientation-map
performance: rendering millions of features
None
None
visual map editor
mapbox.com/studio
None
None
None
None
None
None
None
None
less bandwidth
simulation vs cartography?
None
None
github.com/mapbox/ mapbox-gl-js (JS) github.com/mapbox/ mapbox-gl-native (C++14) iOS, Android, QT, Node,
OSX, Linux, Windows
None
None
why isn’t WebGL everywhere yet?
Let’s build something with OpenGL!
OpenGL — 3D API?
OpenGL is a low-level 2D API
None
OpenGL: a technology for drawing triangles really fast
None
drawing lines
None
anti-aliasing
6 triangles
vertex attributes
2 triangles
line joins & line caps
None
drawing polygons
drawing polygons
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
github.com/mapbox/potpack
mapbox/tiny-sdf
mapbox/ mapbox-gl-rtl-text icu4c C + Emscripten = JavaScript coming soon:
WebAssembly
placing labels
None
mourner/rbush mourner/rbush-knn mourner/kdbush mourner/flatbush mourner/geokdbush mourner/geoflatbush
loading and processing data
mapbox/pbf (JS) mapbox/protozero (C++)
6-7 times faster than JSON.parse Protocol Buffers: 3-4 times smaller
than JSON (gzip)
github.com/mapbox/ vector-tile-spec
mapbox/geojson-vt (JS) mapbox/geojson-vt-cpp (C++)
mapbox/supercluster (JS) mapbox/supercluster-hpp (C++)
mapbox/polylabel (JS, C++)
main thread (UI) processing loading data web workers processing loading
data processing loading data
continuous testing
1082 render tests
mapbox/pixelmatch (JS) mapbox/pixelmatch-cpp (C++)
AppVeyor
hey, what’s there on the server side?
None
the essence of software engineering is mitigation of complexity
vastly bigger scope, same goal: let people build amazing maps
Díky moc! agafonkin.com