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.

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?