how vector maps workVladimir Agafonkin24.08.2016GL
View Slide
the new era ofinteractivecartography
raster tiles era
OpenLayers 2
vectormaps era
MAPS.ME
GL
open source
platform formobile devicesand browsers
based onopen data
why vectormaps?
smooth zoomand rotation
~
perspective view,3D capabilities
data-driven styling
full control overdata presentationin real time
any object onthe map can beinteractive
performance:rendering millionsof features
simulationvscartography?
visual mapeditor
mapbox.com/studio
video on maps
less bandwidth
github.com/mapbox/mapbox-gl-js (JS)github.com/mapbox/mapbox-gl-native (C++14)iOS, Android, QT, OSX, Linux, Node
why WebGL isn’teverywhere yet?
developing a GL-based platform
OpenGL — 3D API?
OpenGL is alow-level 2D API
OpenGL:a technology fordrawing trianglesreally fast
vertex shadertransforms coordinates
fragment shadertransforms pixel color
drawinglines
anti-aliasing
6 triangles
vertex attributes
2 triangles
line joins & line caps
drawingpolygons
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
SDFsigned distancefields
mapbox/shelf-pack (JS)mapbox/shelf-pack-cpp (C++)
mapbox/tiny-sdf
icu4cC + Emscripten = JavaScriptcoming soon: WebAssemblygithub.com/mapbox/mapbox-gl-rtl-text
loading andprocessing data
Protocol Bufferscompact binary dataserialization format
/mapbox/pbf (JS)/mapbox/protozero (C++)Protocol Buffers
3-4 times smallerthan JSON (gzip)6-7 times fasterthan JSON.parse
github.com/mapbox/vector-tile-spec
placing labels
github.com/mapbox/grid-indexgithub.com/mourner/rbush
dynamically loading3rd-party dataon the client
mapbox/geojson-vt (JS)mapbox/geojson-vt-cpp (C++)
pointclustering
mapbox/supercluster (JS)mapbox/supercluter-hpp (C++)
main thread (UI)processingloading dataweb workersprocessingloading dataprocessingloading data
vector stylespecification
github.com/mapbox/mapbox-gl-style-spec
Mapbox GL NativeC++11+ Android, iOS, macOS,Qt, Node bindingsgithub.com/mapbox/mapbox-gl-native
rendering tests
mapbox/mapbox-gl-test-suite
mapbox/pixelmatch (JS)mapbox/pixelmatch-cpp (C++)screenshot comparisonwith anti-aliasing detection
AppVeyor
JS development toolsES6 + BubléESLintTap + Nyc Browserify
hey, what’s thereon the serverside?