Post on 13-Apr-2017
August 7, 2015 GOTHENBURG
Client side rendering of maps using MapCSS
Jonas Danielsson <jonas@threetimestwo.org>
Client side rendering of maps using MapCSS 2
Why do we want this?
I download less dataI makes offline mode feasibleI better HiDPI supportI rely less on third-party servicesI our own GNOME style of maps
Client side rendering of maps using MapCSS 3
OpenStreetMaps
I collaborative project to create editable map of the worldI built by volunteers (2 million of them)I over 30 million changesetsI over 20000 changes per day
Client side rendering of maps using MapCSS 4
Mapping
I node, way, relationsI feature described by tags (key=value)I freestyle tagging
Client side rendering of maps using MapCSS 5
Map tiles
(a) zoom 12 (b) zoom 14 (c) zoom 16
I referenced via coordinates (x, y, z)I makes caching easierI progressive loadingI zoom levels include 4(zoom level) tiles
Client side rendering of maps using MapCSS 6
zoom tile count0 11 42 16... ...16 4,294,967,29617 17,179,869,18418 68,719,476,736
Client side rendering of maps using MapCSS 7
Vector tiles
I same coordinate reference style (x, y, z)I vector representations of the features in the tileI metadata, road names, area types – OSM tagsI smaller in size than image tiles
Client side rendering of maps using MapCSS 8
How much smaller?bounding box of Gothenburg
zoom 14 15 16 17 total total compressedtiles 309 1045 3980 15481 20814 —image size 3.2M 9.5M 29M 92M 133M 67Mvector size 3.6M 7.0M 19M 63M 92M 13M
I image tiles (PNG) from OpenStreetMap map serversI Mapbox vector tiles, served by MapzenI the real win is when compressed
Client side rendering of maps using MapCSS 9
Mapbox Vector tile format
I Google Protocol buffers as container formatI consists of one or more named layersI each layer contains one or more featuresI features contain attributes and geometry
Client side rendering of maps using MapCSS 10
Mapbox Vector tile formatFeature
layer = landusekind = pedestrianname = Järntorgetarea = 17315source = openstreetmap.orgid = 125675120
I contains OpenStreetMap key=value tagsI point, linestring or polygonI contains encoded geometry
Client side rendering of maps using MapCSS 11
Mapbox Vector tile formatGeometry
MoveTo(3, 6), LineTo(8, 12), LineTo(20, 34), ClosePathEncoded as: [ 9 6 12 18 10 12 24 44 15 ]
| | ‘> [00001 111] command type 7 (ClosePath), length 1| | ===== relative LineTo(+12, +22) == LineTo(20, 34)| | ===== relative LineTo(+5, +6) == LineTo(8, 12)| ‘> [00010 010] = command type 2 (LineTo), length 2| ==== relative MoveTo(+3, +6)‘> [00001 001] = command type 1 (MoveTo), length 1
I contains a stream of repeatable commandsI MoveTo, LineTo, ClosePathI parameters uses zigzag encoding
Client side rendering of maps using MapCSS 12
way[highway=secondary],way[highway=road],way[highway=residential] {
width: 7;color: white;z-index: 5;
}
I stylesheet language for mapsI operates on OSM tags, supports zoom filters
Client side rendering of maps using MapCSS 13
MapCSSselectors
canvas {color: #FAEBD7;
}
I OpenStreetMap object typesI nodeI wayI relation
I special casesI areaI lineI canvasI *
Client side rendering of maps using MapCSS 14
MapCSStests
way[is_tunnel=yes] {dashes: 3, 3;
}
way|z8-17[highway=motorway][is_bridge=yes] {casing-color: #cc6500;
}
I binary operators allowed: !=, !=, = , >, <, >=, <=I or unary: way[highway]I restrict to zoom level: area|z17-19[building]
Client side rendering of maps using MapCSS 15
What do we have?vector-tile-glib
(d) MapQuest (e) vector-tile-glib
I uses GLib and GObjectI renders Mapbox Vector tile formatI supports a subset of MapCSS
Client side rendering of maps using MapCSS 16
vector-tile-glib
mapbox.render_async(cr, function() {surface.writeToPNG(’test.png’);Mainloop.quit(’test-bindings’);
});
I currently uses flex as tokenizer and lemon as parserI supports a subset of MapCSSI hooks into libchamplain and can be used by MapsI hosted on Github
Client side rendering of maps using MapCSS 17
Style help needed
Client side rendering of maps using MapCSS 18
Some way to go
Client side rendering of maps using MapCSS 19
Roadmap / wishlist
I infrastructure to serve vector tilesI tiles.gnome.org?I rely on third-party?
I improve vector-tile-glibI keep beutifying the styleI add offline support to libchamplain / MapsI offline search?
Client side rendering of maps using MapCSS 20
Get involved!We need you!
Client side rendering of maps using MapCSS 21
Questions?