Magic Lane
Close navbar icon
Skip to content

Apply Custom Map Style

In this guide you will learn how to render an interactive map, and change the map style by applying a custom map style edited with, and downloaded from, the online editor.
The map is fully 3D, supporting pan, pinch-zoom, pinch-rotate and tilt.

Setup

First, get an API key token, see the Getting Started guide.
Download the Maps & Navigation SDK for Android archive file

Download the ApplyCustomMapStyle project archive file or clone the project with Git

See the Configure Android Example guide.

Run the example

In Android Studio, from the File menu, select Sync Project with Gradle Files

Apply custom map style example Android screenshot

Apply custom map style example Android screenshot

An android device should be connected via USB cable.
Press SHIFT+F10 to compile, install and run the example on the android device.

How it works

Android example screenshot

You can open the MainActivity.kt file to see how an interactive map is rendered and then the custom map style is applied. 

 1private fun applyCustomAssetStyle(mapView: MapView?) = SdkCall.execute {
 2     val filename = "(Desktop) Monochrome Deep Blue (5a1da93a-dbf2-4a36-9b5c-1370386c1496).style"
 3
 4     // Opens style input stream.
 5     val inputStream = applicationContext.resources.assets.open(filename)
 6
 7     // Take bytes.
 8     val data = inputStream.readBytes()
 9     if (data.isEmpty()) return@execute
10
11     // Apply style.
12     mapView?.preferences?.setMapStyleByDataBuffer(DataBuffer(data))
13}
A map style, previously edited in the online editor and then downloaded, is in the assets folder of this example project.
This function opens the file, reads it, and if it is not empty, sets the map style using the style file data just read: mapView?.preferences?.setMapStyleByDataBuffer(DataBuffer(data)) 
 1override fun onCreate(savedInstanceState: Bundle?)
 2{
 3     super.onCreate(savedInstanceState)
 4     setContentView(R.layout.activity_main)
 5
 6     progressBar = findViewById(R.id.progressBar)
 7     gemSurfaceView = findViewById(R.id.gem_surface)
 8
 9     SdkSettings.onMapDataReady = onMapDataReady@{ isReady ->
10         if (!isReady) return@onMapDataReady
11
12         applyCustomAssetStyle(gemSurfaceView.mapView)
13     }
14
15     SdkSettings.onApiTokenRejected = {
16         showDialog("TOKEN REJECTED")
17     }
18
19     if (!Util.isInternetConnected(this))
20     {
21         showDialog("You must be connected to internet!")
22     }
23}
MainActivity overrides the onCreate function, which checks that internet access is available, and then, when the map is ready, that is, loaded and initialized, automatically applies the custom map style stored in this example project’s assets folder:
applyCustomAssetStyle(gemSurfaceView.mapView)

Android Examples

Maps SDK for Android Examples can be downloaded or cloned with Git