Material 3 extensions

The controls that the base library draws take their colors from a fixed palette that reads over any basemap, because Compose Foundation carries no theme. This module replaces them with versions that read your Material 3 color scheme and typography.

To get started, add the dependency to your project:

libs.versions.toml

[libraries]
maplibre-composeMaterial3 = { module = "org.maplibre.compose:maplibre-compose-material3", version = "0.14.0" }

build.gradle.kts

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

MapOverlay.Material3 draws the same controls as MapOverlay.Default in the same places, so switching to it is one parameter:

App.kt

MaplibreMap(overlay = MapOverlay.Material3)

Arrange the controls yourself

Each control is also a composable you can place in a MapOverlay of your own. See Map controls for how the overlay lays out.

App.kt

MaplibreMap(
  overlay =
    MapOverlay {
      ScaleBar(
        cameraState.viewport?.metersPerDpAtTarget ?: 0.0,
        modifier = Modifier.align(Alignment.TopStart),
      ) // (1)!
      CompassButton(cameraState, modifier = Modifier.align(Alignment.TopEnd))
      MaplibreLogo(Modifier.align(Alignment.BottomStart))
      ExpandingAttributionButton(
        cameraState = cameraState,
        styleState = styleState,
        modifier = Modifier.align(Alignment.BottomEnd),
        contentAlignment = Alignment.BottomEnd,
      )
    }
)

1. ScaleBar and CompassButton stay on screen. The Disappearing versions that MapOverlay.Material3 uses fade in when the zoom or the orientation changes, and fade out once it settles.