Tuesday 5 May 2015

Client side rendering of our map using MapCSS!

We want to support an offline mode in GNOME Maps. A mode where you could download an area and have the map data available even if you do not have an Internet connection. The problem is that we are currently using pre-rendered bitmaps. We download them and we show them. This makes supporting an offline mode a bit tough since the amount of data we would have to save would be large.

We have talked off and on about how neat it would be if we could download some kind of vector data and render the map ourselves. But never really made any progress. Until now, kind of.

I have been working on a library that I call Vector-tile-glib. This library will parse and render the Mapbox Vector tile format, and style it using MapCSS. I have hacked a bit on evenings and other spare times when my son has been asleep. It has been fun. It is not done, nor stable. But it has reached a point where I want to tell more people about it and maybe even get some help. There is much left to do, and many many rough edges.

So what I have now is pretty much something that parses the vector tile and can output something to a Cairo context using MapCSS. Or in pictures:



+



=



In order to try it out I have also written a subclass of a Champlain renderer in Maps so we can try this library out in real time. The work is on a branch on the GNOME Maps git repository  called wip/jonasdn/vector-tiles, try it out!
Andreas Nilsson and Marcus Lundblad have been helping me out with an initial style. Join them!

For you to try this, build Maps from the wip branch, then choose the aerial view to get the client side rendered map. Like in the video below:



You can also try out live editing the MapCSS, like in this video:



There are also tools to use in the vector-tile-glib repo, for rendering to PNG, dumping tags from a vector tile and downloading tiles from Mapzen tile service. See the Github README.md for more details on them.

I think this could be something cool to have. Partly for providing a path towards offline Maps and partly to have a map style of our GNOME. Help is appreciated! I am not a parser person or a render person, so I am sure I have made a bunch of really silly mistakes. Pointing them out would be helpful!