Client side rendering of maps using MapCSS
2 likes1,308 views
Client side rendering of maps using MapCSS allows for downloading less data, enabling offline mode, better support for high-resolution displays, less reliance on third-party services, and creating custom GNOME map styles. It uses vector tiles which are smaller in size than raster image tiles and can be rendered using the MapCSS styling language to style OpenStreetMap map features. Current work includes improving the vector-tile-glib library and adding offline support to GNOME Maps.
![Client side rendering of maps using MapCSS 11
Mapbox Vector tile format
Geometry
MoveTo(3, 6), LineTo(8, 12), LineTo(20, 34), ClosePath
Encoded 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
contains a stream of repeatable commands
MoveTo, LineTo, ClosePath
parameters uses zigzag encoding](https://image.slidesharecdn.com/37qv2e2fqacnl1xtapwv-signature-0e97af9a1aaee9da655d136e181bfa460c18fc08194edba6351327a62804d87c-poli-150810095534-lva1-app6892/85/Client-side-rendering-of-maps-using-MapCSS-11-320.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;
}
stylesheet language for maps
operates on OSM tags, supports zoom filters](https://image.slidesharecdn.com/37qv2e2fqacnl1xtapwv-signature-0e97af9a1aaee9da655d136e181bfa460c18fc08194edba6351327a62804d87c-poli-150810095534-lva1-app6892/85/Client-side-rendering-of-maps-using-MapCSS-12-320.jpg)
![Client side rendering of maps using MapCSS 14
MapCSS
tests
way[is_tunnel=yes] {
dashes: 3, 3;
}
way|z8-17[highway=motorway][is_bridge=yes] {
casing-color: #cc6500;
}
binary operators allowed: !=, !=, = , >, <, >=, <=
or unary: way[highway]
restrict to zoom level: area|z17-19[building]](https://image.slidesharecdn.com/37qv2e2fqacnl1xtapwv-signature-0e97af9a1aaee9da655d136e181bfa460c18fc08194edba6351327a62804d87c-poli-150810095534-lva1-app6892/85/Client-side-rendering-of-maps-using-MapCSS-14-320.jpg)
Client side rendering of maps using MapCSS
- 1. August 7, 2015 GOTHENBURG Client side rendering of maps using MapCSS Jonas Danielsson <jonas@threetimestwo.org>
- 2. Client side rendering of maps using MapCSS 2 Why do we want this? download less data makes offline mode feasible better HiDPI support rely less on third-party services our own GNOME style of maps
- 3. Client side rendering of maps using MapCSS 3 OpenStreetMaps collaborative project to create editable map of the world built by volunteers (2 million of them) over 30 million changesets over 20000 changes per day
- 4. Client side rendering of maps using MapCSS 4 Mapping node, way, relations feature described by tags (key=value) freestyle tagging
- 5. Client side rendering of maps using MapCSS 5 Map tiles (a) zoom 12 (b) zoom 14 (c) zoom 16 referenced via coordinates (x, y, z) makes caching easier progressive loading zoom levels include 4(zoom level) tiles
- 6. Client side rendering of maps using MapCSS 6 zoom tile count 0 1 1 4 2 16 ... ... 16 4,294,967,296 17 17,179,869,184 18 68,719,476,736
- 7. Client side rendering of maps using MapCSS 7 Vector tiles same coordinate reference style (x, y, z) vector representations of the features in the tile metadata, road names, area types – OSM tags smaller in size than image tiles
- 8. Client side rendering of maps using MapCSS 8 How much smaller? bounding box of Gothenburg zoom 14 15 16 17 total total compressed tiles 309 1045 3980 15481 20814 — image size 3.2M 9.5M 29M 92M 133M 67M vector size 3.6M 7.0M 19M 63M 92M 13M image tiles (PNG) from OpenStreetMap map servers Mapbox vector tiles, served by Mapzen the real win is when compressed
- 9. Client side rendering of maps using MapCSS 9 Mapbox Vector tile format Google Protocol buffers as container format consists of one or more named layers each layer contains one or more features features contain attributes and geometry
- 10. Client side rendering of maps using MapCSS 10 Mapbox Vector tile format Feature layer = landuse kind = pedestrian name = Järntorget area = 17315 source = openstreetmap.org id = 125675120 contains OpenStreetMap key=value tags point, linestring or polygon contains encoded geometry
- 11. Client side rendering of maps using MapCSS 11 Mapbox Vector tile format Geometry MoveTo(3, 6), LineTo(8, 12), LineTo(20, 34), ClosePath Encoded 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 contains a stream of repeatable commands MoveTo, LineTo, ClosePath parameters uses zigzag encoding
- 12. Client side rendering of maps using MapCSS 12 way[highway=secondary], way[highway=road], way[highway=residential] { width: 7; color: white; z-index: 5; } stylesheet language for maps operates on OSM tags, supports zoom filters
- 13. Client side rendering of maps using MapCSS 13 MapCSS selectors canvas { color: #FAEBD7; } OpenStreetMap object types node way relation special cases area line canvas *
- 14. Client side rendering of maps using MapCSS 14 MapCSS tests way[is_tunnel=yes] { dashes: 3, 3; } way|z8-17[highway=motorway][is_bridge=yes] { casing-color: #cc6500; } binary operators allowed: !=, !=, = , >, <, >=, <= or unary: way[highway] restrict to zoom level: area|z17-19[building]
- 15. Client side rendering of maps using MapCSS 15 What do we have? vector-tile-glib (d) MapQuest (e) vector-tile-glib uses GLib and GObject renders Mapbox Vector tile format supports a subset of MapCSS
- 16. Client side rendering of maps using MapCSS 16 vector-tile-glib mapbox.render_async(cr, function() { surface.writeToPNG(’test.png’); Mainloop.quit(’test-bindings’); }); currently uses flex as tokenizer and lemon as parser supports a subset of MapCSS hooks into libchamplain and can be used by Maps hosted on Github
- 17. Client side rendering of maps using MapCSS 17 Style help needed
- 18. Client side rendering of maps using MapCSS 18 Some way to go
- 19. Client side rendering of maps using MapCSS 19 Roadmap / wishlist infrastructure to serve vector tiles tiles.gnome.org? rely on third-party? improve vector-tile-glib keep beutifying the style add offline support to libchamplain / Maps offline search?
- 20. Client side rendering of maps using MapCSS 20 Get involved! We need you!
- 21. Client side rendering of maps using MapCSS 21 Questions?