Jaak Laineste • May 19, 2016

Mapzen Vector Tiles in CartoDB Mobile SDK

Recently, we announced our partnership with Mapzen. We are commercializing and integrating some of the great services they are building like routing, geocoding, and global basemap data services. As part of this collaboration, we’ll be converging our technology efforts, and today we are one step closer. We are pleased to announce the support of the Mapzen Vector Tile Service into our native Mobile SDK.

The Mapzen Vector Tile Service delivers worldwide coverage of OpenStreetMap base layer data with the latest updates. Vector rendering works great without having to worry about WebGL support on desktop browsers because it is optimized for the native Mobile SDK.

There are great advantages to rendering vector tiles on the SDK. For example, you can dynamically change the styles and rotate labels. The way you define the style of a map for the CartoDB Mobile SDK is, of course, by using CartoCSS, a great styling language we use across our entire platform.

We have also created an additional set of styles that work with the layers and structure of Mapzen Vector Tiles to enable its usage in our Mobile SDK. You can use these styles as an example to further customize your tiles. Our Mobile SDK allows for the dynamic changing of styles, so you can also do so programmatically.

Remember, various vector tiles usually have a different data structure inside. We have worked with Mapzen to ensure you have a set of styles ready to use with their service. Check out the latest style package - nutibright-v3.zip (from developer.nutiteq.com/downloads)! We’ve bundled the general “bright” map style variations for Mapzen Vector Tiles and our previous format.

This makes usage of Mapzen vector tiles quite simple. Just follow these three steps:

1. Load styling from nutibright-v3.zip, make sure you create MBVectorTileDecoder with “mapzen” as the style name parameter.
2. Use HTTP Datasource with Mapzen tile URL. Here is what you’ll find from Mapzen site: https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-xxxxxxx
3. In this URL use your api_key from Mapzen developer site (you need to register there). When defining HTTP datasource, use 0 as min. zoom and 16 as max. zoom.

Code samples for it are in our sample apps for Android.

In order to support Mapzen Vector Tiles we had to made some adjustments on our core, so you need to use the latest Nutiteq Maps SDK 3.3.0 (by CartoDB) to use their tiles.

From a technology perspective this allows our SDK to make use of a great source of Vector Tiles, and gives developers the option to use CartoCSS to style them. CartoCSS on vector tiles, what else could you be looking for. ;)

Happy mobile data mapping!

About the author

More posts from Jaak Laineste