Mapzen Vector Tile Service

Let's take a look at Mapzen's vector tile service.  They've recently announced a developer program and done a lot of work behind the scenes.

Sea levels aren't rising!  Shut up!

Vector Tiles

Mapzen is processing the OpenStreetMap planet file into nicely addressable vector tiles.  They provide the recipes for doing this yourself, but my attitude is better their Amazon account than mine.

Of the formats they offer, WhirlyGlobe-Maply supports two:  GeoJSON and PBF (aka Mapbox Vector Tiles).  I prefer the latter.

PBF (or MVT) contains compressed vector data with general attribution.  To make something visual, you have to match the attributes to a style.  In the past I've used Mapnik XML for this, but this time I've gone with something different.

Mapbox GL Style Sheet

Mapbox has been busily developing (yet another) styling format for their vector tiles.  The new format is nicely tuned to display rather than offline rendering.

The main disadvantage with the new format is there's no way to generate the damn things; you just have to edit the JSON directly.  I imagine we're all hoping they'll update Mapbox Studio one of these days.

OSM loves footpaths

But I like the format and it's clearly where this part of the open source community is going.  So I added a parser to WhirlyGlobe-Maply.

Mapzen Data + Mapbox Style + WhirlyGlobe-Maply

We've got the vector data from Mapzen, a style sheet in the Mapbox format and a big real time rendering toolkit.  How hard is it to put it all together?

Not hard at all.  There's a standard tiling loader (not shown) that will read it on the fly (in multiple threads).  We just have to set up the MapzenSource which involves..

• Reading the MapzenGLStyle file.  It's in the local bundle.
• Setting up the cache directory, so we're not always hitting Mapzen.
• Specifying the base URL and API key for forming the Mapzen URL.
• Picking the layers we want.  All of them in this case, but we could be selective.
• Using PBF (MVT) for the source and Mapbox GL for the style.

Yup, it really is that simple.  I've been messing around with vector tiles for years now.  I've got it down.

This code is in the WhirlyGlobeComponentTester app in the develop branch on github.  I suggest using it in 2D mode.  Things get a little weird on the globe at lower resolutions.

Performance & Next Steps

It's pretty good on the device.  You could use this in a shipping product.  The style is a little bland, but it's fine for a demo.  Rendering performance is decent, but could be optimized.

Needs more labels

Mapzen's set things up so you can fetch individual layers.  I think it would be interesting to use, say the symbol and labels on top of one of NASA's live data sets.  Somebody go do that and let me know how it looks.