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.

Zoomed in map with custom style

Zoomed out map with custom style

Map Implementation

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)).

MainActivity.kt

private fun applyCustomAssetStyle(mapView: MapView?) = SdkCall.execute {
     val filename = "(Desktop) Monochrome Deep Blue (5a1da93a-dbf2-4a36-9b5c-1370386c1496).style"

     // Opens style input stream.
     val inputStream = applicationContext.resources.assets.open(filename)

     // Take bytes.
     val data = inputStream.readBytes()
     if (data.isEmpty()) return@execute

     // Apply style.
     mapView?.preferences?.setMapStyleByDataBuffer(DataBuffer(data))
}

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)

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?)
{
     super.onCreate(savedInstanceState)
     setContentView(R.layout.activity_main)

     progressBar = findViewById(R.id.progressBar)
     gemSurfaceView = findViewById(R.id.gem_surface)

     SdkSettings.onMapDataReady = onMapDataReady@{ isReady ->
         if (!isReady) return@onMapDataReady

         applyCustomAssetStyle(gemSurfaceView.mapView)
     }

     SdkSettings.onApiTokenRejected = {
         showDialog("TOKEN REJECTED")
     }

     ...
}