Style the map

Every map requires a style: a JSON document that describes the data the map shows and how the map draws it. Tile providers usually publish styles designed for their data and serve them at a URI. You can also create your own styles with Maputnik, a visual style editor for MapLibre styles.

Free and commercial tile providers are listed in the awesome-maplibre repository. This documentation uses OpenFreeMap and Protomaps.

Use a style

Create a MapState with the style URI as its initial BaseStyle, then pass that state to MaplibreMap:

App.kt

val simple =
  rememberMapState(
    initialBaseStyle = BaseStyle.Uri("https://tiles.openfreemap.org/styles/liberty")
  )
MaplibreMap(state = simple)

Switch styles at runtime

Assign mapState.style.baseStyle to switch styles. To follow Compose state such as the system theme, assign it in a SideEffect:

App.kt

val variant = if (isSystemInDarkTheme()) "dark" else "light"
val baseStyle = BaseStyle.Uri("https://api.protomaps.com/styles/v4/$variant/en.json?key=MY_KEY")
val dynamic = rememberMapState(initialBaseStyle = baseStyle)
SideEffect { dynamic.style.baseStyle = baseStyle }
MaplibreMap(state = dynamic)

Load a local style

To ship a style with your app, load it with Compose Multiplatform resources:

App.kt

val local = rememberMapState(initialBaseStyle = BaseStyle.Uri(Res.getUri("files/style.json")))
MaplibreMap(state = local)