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
310
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
1.9k
Fast by Default: Algorithmic Optimization in Practice (JSCamp 2019)
mourner
0
370
How Vector Maps Work (2019)
mourner
1
350
Fast by default: everyday algorithmic thinking for developers [RU]
mourner
1
280
Fast by default: everyday algorithmic thinking for developers
mourner
1
430
Random cool stuff I've been hacking on (mostly spatial indices)
mourner
0
470
Как работают современные интерактивные карты на WebGL
mourner
1
460
Leaflet, WebGL & the Future of Web Mapping
mourner
5
3.2k
How Simplicity Will Save GIS
mourner
10
4k
Other Decks in Programming
See All in Programming
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
生成AIをkintoneに連携してみた
hideg
0
230
유연한 Composable 설계
l2hyunwoo
0
380
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
ドメイン駆動設計の実践
masuda220
PRO
19
5.2k
AHC035解説
terryu16
0
720
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
20240706_CDKConf
takuyay0ne
0
1.2k
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
Featured
See All Featured
How GitHub (no longer) Works
holman
305
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Infographics Made Easy
chrislema
238
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
What's in a price? How to price your products and services
michaelherold
239
11k
Designing for humans not robots
tammielis
247
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Adopting Sorbet at Scale
ufuk
71
8.8k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
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