Material 3 extensions

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.3.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, 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(cameraState, 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.