client side rendering of maps using mapcss
TRANSCRIPT
![Page 1: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/1.jpg)
August 7, 2015 GOTHENBURG
Client side rendering of maps using MapCSS
Jonas Danielsson <[email protected]>
![Page 2: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/2.jpg)
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
![Page 3: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/3.jpg)
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
![Page 4: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/4.jpg)
Client side rendering of maps using MapCSS 4
Mapping
I node, way, relationsI feature described by tags (key=value)I freestyle tagging
![Page 5: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/5.jpg)
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
![Page 6: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/6.jpg)
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
![Page 7: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/7.jpg)
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
![Page 8: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/8.jpg)
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
![Page 9: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/9.jpg)
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
![Page 10: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/10.jpg)
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
![Page 11: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/11.jpg)
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
![Page 12: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/12.jpg)
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
![Page 13: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/13.jpg)
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 *
![Page 14: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/14.jpg)
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]
![Page 15: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/15.jpg)
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
![Page 16: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/16.jpg)
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
![Page 17: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/17.jpg)
Client side rendering of maps using MapCSS 17
Style help needed
![Page 18: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/18.jpg)
Client side rendering of maps using MapCSS 18
Some way to go
![Page 19: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/19.jpg)
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?
![Page 20: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/20.jpg)
Client side rendering of maps using MapCSS 20
Get involved!We need you!
![Page 21: Client side rendering of maps using MapCSS](https://reader034.vdocuments.us/reader034/viewer/2022052514/58eea6cc1a28ab8b418b460b/html5/thumbnails/21.jpg)
Client side rendering of maps using MapCSS 21
Questions?