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

# Add interactions to predefined featuresets

![Highlight predefined Points-of-Interest (POI) in Mapbox Standard Style.](https://docs.mapbox.com/android/ja/assets/ideal-img/maps-compose-examples-pre-defined-feature-interaction.ab161fe.480.png)

The **Mapbox Standard Style** exposes three [featuresets](https://docs.mapbox.com/style-spec/reference/featuresets/) for buildings, place labels, and points of interest (POIs).

This example shows how to use [`addInteraction`](https://docs.mapbox.com/android/maps/api/latest/mapbox-maps-android/com.mapbox.maps.plugin.delegates/-map-interaction-delegate/add-interaction.html) with a [featureset](https://docs.mapbox.com/style-spec/reference/featuresets/) to set the `highlight` and `select` feature states for these predefined featuresets, causing the interacted feature to change its visual appearance.

`addInteraction` is also used to add a click listener to the map itself, which is used to clear the feature states and reset the visual appearance of the map.

> **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.28.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: `StandardStyleActivity.kt`

[View on GitHub](https://github.com/mapbox/mapbox-maps-android/blob/v11.28.0/compose-app/src/main/java/com/mapbox/maps/compose/testapp/examples/style/StandardStyleActivity.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.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ButtonDefaults
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.remember
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.maps.compose.testapp.ExampleScaffold
import com.mapbox.maps.compose.testapp.examples.utils.CityLocations
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.BooleanValue
import com.mapbox.maps.extension.compose.style.StringValue
import com.mapbox.maps.extension.compose.style.standard.LightPresetValue
import com.mapbox.maps.extension.compose.style.standard.MapboxStandardSatelliteStyle
import com.mapbox.maps.extension.compose.style.standard.MapboxStandardStyle
import com.mapbox.maps.extension.compose.style.standard.ThemeValue
import com.mapbox.maps.extension.compose.style.standard.rememberStandardSatelliteStyleState
import com.mapbox.maps.extension.compose.style.standard.rememberStandardStyleState
import com.mapbox.maps.extension.style.utils.transition

/**
 * Example to showcase usage of the configs of `MapboxStandardStyle`.
 */
public class StandardStyleActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      var isStandardSatellite by remember {
        mutableStateOf(false)
      }
      var enableLandmarkIcons by remember {
        mutableStateOf(true)
      }
      var enablePlaceLabels by remember {
        mutableStateOf(true)
      }
      var enableRoadLabels by remember {
        mutableStateOf(true)
      }
      var enablePointOfInterestLabels by remember {
        mutableStateOf(true)
      }
      var enableTransitLabels by remember {
        mutableStateOf(true)
      }
      var selectedLightPreset by remember {
        mutableStateOf(LightPresetValue.DAY)
      }
      var selectedFont by remember {
        mutableStateOf("DIN Pro")
      }
      var selectedTheme by remember {
        mutableStateOf(ThemeValue.DEFAULT)
      }
      var enable3dObjects by remember {
        mutableStateOf(true)
      }
      var enableRoadsAndTransit by remember {
        mutableStateOf(true)
      }
      var enablePedestrianRoads by remember {
        mutableStateOf(true)
      }
      var enableAdminBoundaries by remember {
        mutableStateOf(true)
      }

      MapboxMapComposeTheme {
        ExampleScaffold(
          floatingActionButton = {
            Column(
              modifier = Modifier.width(IntrinsicSize.Max)
            ) {
              Row(
                modifier = Modifier.fillMaxWidth()
              ) {
                FloatingActionButton(
                  modifier = Modifier
                    .defaultMinSize(
                      minWidth = ButtonDefaults.MinWidth,
                      minHeight = ButtonDefaults.MinHeight
                    )
                    .padding(end = 4.dp),
                  onClick = {
                    if (!isStandardSatellite) {
                      enableLandmarkIcons = !enableLandmarkIcons
                    }
                  },
                  shape = RoundedCornerShape(16.dp),
                  backgroundColor = if (isStandardSatellite) Color.Gray else MaterialTheme.colors.secondary,
                ) {
                  Text(
                    modifier = Modifier.padding(6.dp),
                    text = "showLandmarkIcons: $enableLandmarkIcons"
                  )
                }
              }
              Row(
                modifier = Modifier.fillMaxWidth()
              ) {
                FloatingActionButton(
                  modifier = Modifier
                    .defaultMinSize(
                      minWidth = ButtonDefaults.MinWidth,
                      minHeight = ButtonDefaults.MinHeight
                    )
                    .padding(end = 4.dp),
                  onClick = {
                    enablePlaceLabels = !enablePlaceLabels
                  },
                  shape = RoundedCornerShape(16.dp),
                ) {
                  Text(
                    modifier = Modifier.padding(6.dp),
                    text = "showPlaceLabels: $enablePlaceLabels"
                  )
                }
                FloatingActionButton(
                  modifier = Modifier
                  .defaultMinSize(
                    minWidth = ButtonDefaults.MinWidth,
                    minHeight = ButtonDefaults.MinHeight
                  ),
                  onClick = {
                    enableRoadLabels = !enableRoadLabels
                  },
                  shape = RoundedCornerShape(16.dp),
                ) {
                  Text(
                    modifier = Modifier.padding(6.dp),
                    text = "showRoadLabels: $enableRoadLabels"
                  )
                }
              }
              Row(
                modifier = Modifier.fillMaxWidth()
              ) {
                FloatingActionButton(
                modifier = Modifier
                  .defaultMinSize(
                    minWidth = ButtonDefaults.MinWidth,
                    minHeight = ButtonDefaults.MinHeight
                  )
                  .padding(end = 4.dp),
                  onClick = {
                    enableTransitLabels = !enableTransitLabels
                  },
                  shape = RoundedCornerShape(16.dp),
                ) {
                  Text(
                    modifier = Modifier.padding(6.dp),
                    text = "showTransitLabels: $enableTransitLabels"
                  )
                }
                FloatingActionButton(
                  modifier = Modifier
                    .defaultMinSize(
                      minWidth = ButtonDefaults.MinWidth,
                      minHeight = ButtonDefaults.MinHeight
                    ),
                  onClick = {
                    selectedFont = when (selectedFont) {
                      "DIN Pro" -> "Roboto"
                      else -> "DIN Pro"
                    }
                  },
                  shape = RoundedCornerShape(16.dp),
                ) {
                  Text(
                    modifier = Modifier.padding(6.dp),
                    text = "font: $selectedFont"
                  )
                }
              }
              FloatingActionButton(
                modifier = Modifier
                  .defaultMinSize(
                    minWidth = ButtonDefaults.MinWidth,
                    minHeight = ButtonDefaults.MinHeight
                  ),
                onClick = {
                  enablePointOfInterestLabels = !enablePointOfInterestLabels
                },
                shape = RoundedCornerShape(16.dp),
              ) {
                Text(
                  modifier = Modifier.padding(6.dp),
                  text = "showPointOfInterestLabels: $enablePointOfInterestLabels"
                )
              }
              Row(
                modifier = Modifier.fillMaxWidth()
              ) {
                FloatingActionButton(
                  modifier = Modifier
                      .defaultMinSize(
                          minWidth = ButtonDefaults.MinWidth,
                          minHeight = ButtonDefaults.MinHeight
                      )
                      .padding(end = 4.dp),
                  onClick = {
                    selectedLightPreset = when (selectedLightPreset) {
                      LightPresetValue.DAY -> LightPresetValue.DUSK
                      LightPresetValue.DUSK -> LightPresetValue.NIGHT
                      LightPresetValue.NIGHT -> LightPresetValue.DAWN
                      LightPresetValue.DAWN -> LightPresetValue.DAY
                      else -> LightPresetValue.NIGHT
                    }
                  },
                  shape = RoundedCornerShape(16.dp),
                ) {
                  Text(
                    modifier = Modifier.padding(6.dp),
                    text = "lightPreset: ${selectedLightPreset.presetNameOrNull}"
                  )
                }
                FloatingActionButton(
                  modifier = Modifier
                      .defaultMinSize(
                          minWidth = ButtonDefaults.MinWidth,
                          minHeight = ButtonDefaults.MinHeight
                      )
                      .padding(end = 4.dp),
                  onClick = {
                    if (!isStandardSatellite) {
                      selectedTheme = when (selectedTheme) {
                        ThemeValue.DEFAULT -> ThemeValue.FADED
                        ThemeValue.FADED -> ThemeValue.MONOCHROME
                        ThemeValue.MONOCHROME -> ThemeValue.DEFAULT
                        else -> ThemeValue.DEFAULT
                      }
                    }
                  },
                  shape = RoundedCornerShape(16.dp),
                  backgroundColor = if (isStandardSatellite) Color.Gray else MaterialTheme.colors.secondary,
                ) {
                  Text(
                    modifier = Modifier.padding(6.dp),
                    text = "selectedTheme: ${selectedTheme.presetNameOrNull}"
                  )
                }
              }
              Row(
                modifier = Modifier.fillMaxWidth()
              ) {
                FloatingActionButton(
                  modifier = Modifier
                      .defaultMinSize(
                          minWidth = ButtonDefaults.MinWidth,
                          minHeight = ButtonDefaults.MinHeight
                      )
                      .padding(end = 4.dp),
                  onClick = {
                    if (!isStandardSatellite) {
                      enable3dObjects = !enable3dObjects
                    }
                  },
                  shape = RoundedCornerShape(16.dp),
                  backgroundColor = if (isStandardSatellite) Color.Gray else MaterialTheme.colors.secondary,
                ) {
                  Text(
                    modifier = Modifier.padding(6.dp),
                    text = "show3dObjects:$enable3dObjects"
                  )
                }
                FloatingActionButton(
                  modifier = Modifier
                    .defaultMinSize(
                      minWidth = ButtonDefaults.MinWidth,
                      minHeight = ButtonDefaults.MinHeight
                    ),
                  onClick = {
                    isStandardSatellite = !isStandardSatellite
                  },
                  shape = RoundedCornerShape(16.dp),
                ) {
                  Text(
                    modifier = Modifier.padding(6.dp),
                    text = "selectedStyle:${
                      if (isStandardSatellite) {
                        "SATELLITE"
                      } else {
                        "STANDARD"
                      }
                    }"
                  )
                }
              }
              Row(
                modifier = Modifier.fillMaxWidth()
              ) {
                FloatingActionButton(
                  modifier = Modifier
                    .defaultMinSize(
                      minWidth = ButtonDefaults.MinWidth,
                      minHeight = ButtonDefaults.MinHeight
                    ),
                  onClick = {
                    enableAdminBoundaries = !enableAdminBoundaries
                  },
                  shape = RoundedCornerShape(16.dp),
                ) {
                  Text(
                    modifier = Modifier.padding(6.dp),
                    text = "enableAdminBoundaries: $enableAdminBoundaries"
                  )
                }
              }
            }
          }
        ) {
          MapboxMap(
            Modifier.fillMaxSize(),
            mapViewportState = rememberMapViewportState {
              setCameraOptions {
                zoom(ZOOM)
                center(CityLocations.HELSINKI)
                pitch(40.0)
              }
            },
            style =
            {
              if (isStandardSatellite) {
                MapboxStandardSatelliteStyle(
                  standardSatelliteStyleState = rememberStandardSatelliteStyleState {
                    styleTransition = transition {
                      duration(1_000)
                      enablePlacementTransitions(true)
                    }
                    configurationsState.apply {
                      showPlaceLabels = BooleanValue(enablePlaceLabels)
                      showRoadLabels = BooleanValue(enableRoadLabels)
                      showPointOfInterestLabels = BooleanValue(enablePointOfInterestLabels)
                      showTransitLabels = BooleanValue(enableTransitLabels)
                      lightPreset = selectedLightPreset
                      font = StringValue(selectedFont)
                      showAdminBoundaries = BooleanValue(enableAdminBoundaries)
                    }
                  }
                )
              } else {
                MapboxStandardStyle(
                  standardStyleState = rememberStandardStyleState {
                    interactionsState.onBuildingsClicked { clickedBuilding, _ ->
                      clickedBuilding.setStandardBuildingsState {
                        highlight(true)
                      }
                      return@onBuildingsClicked true
                    }
                    interactionsState.onLandmarkIconsClicked { clickedLandmarkIcon, _ ->
                      println("Feature name: ${clickedLandmarkIcon.name}")
                      return@onLandmarkIconsClicked true
                    }
                    styleTransition = transition {
                      duration(1_000)
                      enablePlacementTransitions(true)
                    }
                    configurationsState.apply {
                      showLandmarkIcons = BooleanValue(enableLandmarkIcons)
                      showPlaceLabels = BooleanValue(enablePlaceLabels)
                      showRoadLabels = BooleanValue(enableRoadLabels)
                      showPointOfInterestLabels = BooleanValue(enablePointOfInterestLabels)
                      showTransitLabels = BooleanValue(enableTransitLabels)
                      lightPreset = selectedLightPreset
                      font = StringValue(selectedFont)
                      theme = selectedTheme
                      show3dObjects = BooleanValue(enable3dObjects)
                      showAdminBoundaries = BooleanValue(enableAdminBoundaries)
                    }
                  }
                )
              }
            }
          )
        }
      }
    }
  }

  private companion object {
    const val ZOOM: Double = 9.0
  }
}
```