Workshop week - looking at Mapbox GL

In the last week before people start disappearing for the summer holidays, Norkart’s web development group spends a week focusing on exploring a specific subject. This year: Mapbox GL!

The workshop week follows a simple format:

  • Monday: Get psyched! We brainstorm ideas, vote for the most interesting ones and divide into groups.
  • Tuesday-Thursday: Build prototypes that show off something cool or let you learn new stuff. Dodge as many time-wasting activities like “urgent requests for assistance”, “external meetings” and “administrative obligations” as you can.
  • Friday: Polish it up as much as you can (duck-taping over all the obvious missing parts) and present it to everybody else. Heads explode! Then people can go on their holidays with happy memories and fresh new knowledge.

As previous (Norwegian-speaking) readers will know, some of our developers have visited Mapbox in San Fran and learnt a lot about what they’re doing with Mapbox GL. So it was natural to make this year’s workshop week about spreading the knowledge to the other developers, and letting them apply that knowledge in their areas of interest.

Meet the contenders

By the end of Monday, we divided into four working groups. The members worked together under a common theme, but specialised in their own subsections.

The server-side about-muckers

While Mapbox obviously are the world leaders in efficient hosting of their own tile format, we wanted to explore some special use cases that require a bit of our own server-side magic. One is using PGRestAPI on top of a PostGIS server in order to produce tiles directly from the database, which can be useful for data that gets updated frequently. We set up a service that provided vector tiles from one of our own data sets, and verified that it rendered nicely client-side. There are a lot of potentially useful applications for a vector tile data source that is as fresh and ephemeral as a WMS response.

The other server-side adventure went the exact opposite way. Namely,  creating a service that carves out caches of data for use offline. (Letting you have data that is as stale as you like!) Even though support for using offline mbtiles is still only on the roadmap for Mapbox GL’s iOS/Android editions, we are salivating at the thought. A lot of our customers with municipal management apps have to cover large areas with spotty mobile reception. This means they have long wished for detailed offline caches. With raster tiles, creating a zoom level 20 cache for thousands of square kilometres results in a prohibitively large file, but with vector tiles our experiments have shown it to be a much more realistic alternative. So we created a node.js service where users can request tilecaches for so-and-so municipality. Then the service uses tilelive to carve out a suitable section of the national cache and return it. So now we’ll be ready on day one when Mapbox GL gets mbtiles support!

We also created a ugly primitive GUI to demonstrate the service being used:


The alternate client folks

Since Mapbox-style vector tiles are an open specification, other clients than Mapbox GL exist. This crew explored using the vector tiles in other clients, like Mapzen’s Tangram, OpenLayers 3 (wrapping Mapbox GL, since the native support is still underway), Leaflet via the MapboxVectorTile plugin (an independent implementation) and Leaflet via the mapbox-gl-leaflet plugin (another wrapper for Mapbox GL). Some avenues led further than others, but we got a nice set of prototypes out of it. We also learned a lot about the available options!

One of our developers combined Mapbox GL JS with our stack for showing oblique angle aerial images. The result was a nice minimap showing a tracing of what you’ve been looking at, rendered with the appropriate pitch:

Mapbox GL og skråbilder

The data visualisers

One of the exciting things about vector tile technology is the potential for dynamic transitions of map styles depending on conditions. So this gang looked at how you might transition the styles in your map depending on the weather in the area you are looking at. This GIF has compressed all the style changes into a short period, rather than allowing them to change with time and weather like they normally would:

animert værtkart

They implemented the style changing behaviour on both JS, iOS and Android versions of Mapbox GL. The Android version was noticeably harder to work with, since it hasn’t had the same level of tender-loving care that the iOS version has had lately.

The MapWars crew

With a stated goal of learning as much as possible about bending Mapbox GL to their will without accidentally creating a product the marketing people want to start selling (a mistake made in previous workshops), the MapWars team decided to create a computer game based on Mapbox GL. The premise is simple: you fly a paper plane over the map, dropping bombs on targets and picking up ammo resupplys, all within the framework allowed by Mapbox GL. As is befitting a modern computer game, development was pursued in a multiplatform way, with implementations in the browser and on iOS.

The browser edition became the most complete game, with targets, bombs, ammo and scores:


Meanwhile the iOS edition had the most fun control scheme, where you can steer your plane by tilting the device:


As a special bonus, you can play the browser edition right here! Warning: You’ll want Chrome and a fairly modern and beefy machine for it to work. Also, it’s completely untouched by the hands of Quality Assurance. So it might behave in unpredictable ways if you run it on any other machine than the one it was written on. Arrow keys steer the plane, space bar drops bombs. When you hit five targets in a row, the map colours temporarily invert themselves to celebrate!

In conclusion

Experimenting with new technologies to create something for fun rather than profit, is a great way to learn things and bond as a group. We’ve certainly raised the group’s knowledge of Mapbox GL a lot this week! Regarding Mapbox GL in its various forms, our creativity has been limited by the fact that it is still a work in progress, especially on some of the platforms we worked with. The basic map rendering is great, but compared to the raster libraries out there, the surrounding ecosystem of annotations and the like is a lot weaker. Also, the JS version is more or less limited to being used in Chrome. However, it has a lot of promise, and when all the extra stuff catches up (it’s all on some roadmap, we hope) Mapbox GL will be a great fit for a lot of our products!