Material 3 extensions

Warning

While this module is available across all platforms, you won't be able to use it on top of the map on Web or Desktop due to technical limitations in Compose Multiplatform. See YouTrack issue CMP-6001 and CMP-6856.

Android and iOS are not affected by this limitation.

Getting Started

We provide reimplementations of certain ornaments using Material 3. These are regular Compose UI components, so you can position them arbitrarily, style them, animate them, etc.

To get started, add the dependency to your project:

libs.versions.toml

[libraries]
maplibre-composeMaterial3 = { module = "dev.sargunv.maplibre-compose:maplibre-compose-material3", version = "0.6.0" }

build.gradle.kts

commonMain.dependencies {
  implementation(libs.maplibre.composeMaterial3)
}

Then, disable the default ornaments and add the Material controls after the MaplibreMap in a shared Box.

App.kt

val cameraState = rememberCameraState()
val styleState = rememberStyleState()

Box(Modifier.fillMaxSize()) {
  MaplibreMap(
    cameraState = cameraState,
    styleState = styleState,
    ornamentSettings = OrnamentSettings.AllDisabled,
  )

  Box(modifier = Modifier.fillMaxSize().padding(8.dp)) {
    ScaleBar(cameraState.metersPerDpAtTarget, modifier = Modifier.align(Alignment.TopStart))
    CompassButton(cameraState, modifier = Modifier.align(Alignment.TopEnd))
    AttributionButton(styleState, modifier = Modifier.align(Alignment.BottomEnd))
  }
}

There are also disappearing versions of the controls which appear when relevant and fade out after a certain time:

App.kt

Box(modifier = Modifier.fillMaxSize()) {
  MaplibreMap(
    cameraState = cameraState,
    styleState = styleState,
    ornamentSettings = OrnamentSettings.AllDisabled,
  )

  Box(modifier = Modifier.fillMaxSize().padding(8.dp)) {
    DisappearingScaleBar(
      metersPerDp = cameraState.metersPerDpAtTarget,
      zoom = cameraState.position.zoom,
      modifier = Modifier.align(Alignment.TopStart),
    ) // (1)!
    DisappearingCompassButton(cameraState, modifier = Modifier.align(Alignment.TopEnd)) // (2)!
    AttributionButton(styleState, modifier = Modifier.align(Alignment.BottomEnd))
  }
}

1. Appears when the zoom level changes; fades away when zoom is idle.
2. Appears when the map is rotated or tilted away from north and straight down; fades away when the map orientation is reset.