> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/maps/llms.txt)

# Use style terrain

![Showcase updating terrain.](https://docs.mapbox.com/android/assets/ideal-img/maps-compose-examples-terrain.aa2f49c.480.png)

This example demonstrates 3D terrain visualization using the **Mapbox Maps SDK for Android**

The example loads the [Mapbox Terrain DEM V1](https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-dem-v1/) (digital elevation model) tile source into a `customTerrainState` to provide the data to render the elevations. It also includes UI buttons to adjust the terrain exaggeration, enable or disable the terrain layer completely using the `terrainState` property of the [`StyleState`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.extension.compose.style/-style-state/) class.

> **Note: Android Examples App Available**
> 
> This example code is part of the **Maps SDK for Android Examples App**, a working Android project [available on GitHub](https://github.com/mapbox/mapbox-maps-android/tree/v11.29.0/). Android developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.
> 
> See our [Run the Maps SDK for Android Examples App](https://docs.mapbox.com/help/tutorials/maps-sdk-android-examples-app/) tutorial for step-by-step instructions.

**Kotlin**

Title: `TerrainActivity.kt`

[View on GitHub](https://github.com/mapbox/mapbox-maps-android/blob/v11.29.0/compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/style/TerrainActivity.kt)

```kt
package com.mapbox.maps.compose.testapp.examples.style

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.mapbox.geojson.Point
import com.mapbox.maps.Style
import com.mapbox.maps.compose.testapp.ExampleScaffold
import com.mapbox.maps.compose.testapp.ui.theme.MapboxMapComposeTheme
import com.mapbox.maps.extension.compose.MapboxMap
import com.mapbox.maps.extension.compose.animation.viewport.rememberMapViewportState
import com.mapbox.maps.extension.compose.style.DoubleValue
import com.mapbox.maps.extension.compose.style.GenericStyle
import com.mapbox.maps.extension.compose.style.LongValue
import com.mapbox.maps.extension.compose.style.StringValue
import com.mapbox.maps.extension.compose.style.rememberStyleState
import com.mapbox.maps.extension.compose.style.sources.generated.rememberRasterDemSourceState
import com.mapbox.maps.extension.compose.style.terrain.generated.TerrainState
import com.mapbox.maps.extension.compose.style.terrain.generated.rememberTerrainState
import kotlin.math.round

/**
 * Example to showcase usage of terrain.
 */
public class TerrainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {

      val rasterDemSourceState = rememberRasterDemSourceState().apply {
        url = StringValue(TERRAIN_URL_TILE_RESOURCE)
        tileSize = LongValue(TILE_SIZE)
      }

      val customTerrainState = rememberTerrainState(rasterDemSourceState) {
        exaggeration = DoubleValue(1.0)
      }

      var currentTerrainState by rememberSaveable(stateSaver = TerrainState.Saver) {
        mutableStateOf(customTerrainState)
      }

      MapboxMapComposeTheme {
        ExampleScaffold(
          floatingActionButton = {
            Column {
              FloatingActionButton(
                modifier = Modifier.padding(bottom = 10.dp),
                backgroundColor = if (currentTerrainState == TerrainState.DISABLED) Color.LightGray else MaterialTheme.colors.secondary,
                onClick = {
                  if (currentTerrainState != TerrainState.DISABLED) {
                    var exaggeration = currentTerrainState.exaggeration.doubleOrNull!! + 0.2
                    exaggeration = (round(exaggeration * 100)) / 100.0
                    currentTerrainState.exaggeration = DoubleValue(exaggeration)
                  }
                },
                shape = RoundedCornerShape(16.dp),
              ) {
                Text(modifier = Modifier.padding(10.dp), text = "Increase exaggeration (${currentTerrainState.exaggeration.doubleOrNull})")
              }
              FloatingActionButton(
                modifier = Modifier.padding(bottom = 10.dp),
                onClick = {
                  currentTerrainState = if (currentTerrainState == TerrainState.DISABLED) {
                    customTerrainState
                  } else {
                    TerrainState.DISABLED
                  }
                },
                shape = RoundedCornerShape(16.dp),
              ) {
                Text(
                  modifier = Modifier.padding(10.dp),
                  text = if (currentTerrainState == TerrainState.DISABLED)
                    "Enable terrain"
                  else
                    "Disable terrain"
                )
              }
            }
          }
        ) {
          MapboxMap(
            Modifier.fillMaxSize(),
            mapViewportState = rememberMapViewportState {
              setCameraOptions {
                zoom(ZOOM)
                center(CENTER)
                pitch(PITCH)
              }
            },
            style = {
              GenericStyle(
                style = Style.STANDARD_SATELLITE,
                styleState = rememberStyleState {
                  terrainState = currentTerrainState
                },
              )
            }
          )
        }
      }
    }
  }

  private companion object {
    private const val TILE_SIZE = 514L
    private const val ZOOM: Double = 11.0
    private const val PITCH: Double = 80.0
    private val CENTER = Point.fromLngLat(138.7274, 35.3606)
    private const val TERRAIN_URL_TILE_RESOURCE = "mapbox://mapbox.mapbox-terrain-dem-v1"
  }
}
```