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(baseStyle = BaseStyle.Uri("https://tiles.openfreemap.org/styles/liberty"))
MaplibreMap(state = simple)

Switch styles at runtime

Pass the current style to rememberMapState to follow Compose state such as the system theme:

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(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(baseStyle = BaseStyle.Uri(Res.getUri("files/style.json")))
MaplibreMap(state = local)