Interacting with the map

Gestures

Companion presets cover the common cases. Construct GestureOptions with individual fields to change pan, zoom, rotate, and tilt independently.

MaplibreMap(options = MapOptions(gestureOptions = GestureOptions.Standard))

The map supports pan, zoom, rotate, and tilt gestures. Each of these can be enabled or disabled individually.

MaplibreMap(
  options =
    MapOptions(
      gestureOptions =
        GestureOptions(
          isTwoFingerTiltEnabled = true,
          isPinchZoomEnabled = true,
          isTwoFingerRotateEnabled = true,
          isDragPanEnabled = true,
        )
    )
)

Camera

If you want to read or mutate the camera state, use rememberCameraState(). You can use this to set the start position of the map:

val camera =
  rememberCameraState(
    firstPosition =
      CameraPosition(target = Position(latitude = 45.521, longitude = -122.675), zoom = 13.0)
  )
MaplibreMap(cameraState = camera)

You can now use the camera reference to move the camera. For example, CameraState exposes a suspend fun animateTo to animate the camera to a new position:

LaunchedEffect(Unit) {
  camera.animateTo(
    finalPosition =
      camera.position.copy(target = Position(latitude = 47.607, longitude = -122.342)),
    duration = 3.seconds,
  )
}

Click listeners

You can listen for clicks on the map. A rendered feature query suspends. Launch the query in a coroutine. Return ClickResult.Pass to send the click on to the layer listeners:

val scope = rememberCoroutineScope()
MaplibreMap(
  cameraState = camera,
  onMapClick = { pos, offset ->
    scope.launch {
      val features = camera.queryRenderedFeatures(offset)
      if (features.isNotEmpty()) {
        println("Clicked on ${features[0].toJson()}")
      }
    }
    ClickResult.Pass
  },
  onMapLongClick = { pos, offset ->
    println("Long click at $pos")
    ClickResult.Pass
  },
)