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?