Change Basemap Styling with the SDK

Summary

Learn how to leverage vector-based maps with mobile SDKs! Customize map styles effortlessly for offline packages. Explore dynamic parameters & CartoCSS styling.

This post may describe functionality for an old version of CARTO. Find out about the latest and cloud-native version here.
Change Basemap Styling with the SDK
Change base map styling with the SDK

Now that you’ve mastered indoor mapping let me introduce you to another great benefit of the mobile SDK. One of the key advantages of vector-basedmaps is that you can re-style them on the client side using just one single map source. This is especially useful for offline map package cases.

Basemap style file format

Since version 3.0 Nutiteq vector basemaps have used Mapnik XML as a style language. Mapnik XML defines what layers are visible at which zoom levels what are colors line styles and text -- basically everything about how a map should look. It is a well-known language that has been used for years.

There are style editing tools like Mapbox Studio Classic that can be used to edit or generate the file from CartoCSS styling. Specifically for the mobile SDK we need XML and several additional assets as extra files -- fonts and icons for POIs and images for line patterns. We use style.xml as the main style name and bundle all assets to a single zip file and use this as a style package that is referred to in the code.

Some of the style assets e.g. font files can be big. Our default setting with all the international characters (Chinese Korean etc.) is about 7MB which is much larger than the whole SDK binary. If you have several similar styles in your app then you do not want to repeat them. Luckily one style zip can include several style XMLs which reuse similar assets and our SDK can read each style from it.

Dynamic style parameters

Generally the loaded style is immutable. You’ll need to edit it in an XML file level and it cannot be changed in code. Sometimes this is not good because you do not want to have very many similar styles just to change your map language. We have added one feature to Mapnik XML as our custom addition -- style parameters.

These are specific variables in style that you can change in code. Usage of the variables must be predefined in XML then the code can change their value. In our style we have pre-defined for example the following parameters:

  • Map text language
  • 3D building on/off
  • 3D text orientation: Billboard or flat

Styling using CartoCSS

The mobile SDK since 3.3.0 supports an additional map styling language--CartoCSS. This is much more compact and is compatible with CartoDB’s general map styling tools.

In our downloads page you can find a package with 3 ready-made styles:Grey Bright (generic/universal) and Dark. These are compatible with our nutiteq.osm-v2 online and offline data source. Read more technical details about map styling from our mobile developer site.

Change Base Map Styling

Happy mobile data mapping!