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

Pass the style URI to the MaplibreMap composable as a BaseStyle:

App.kt

MaplibreMap(baseStyle = BaseStyle.Uri("https://tiles.openfreemap.org/styles/liberty"))

Switch styles at runtime

Select a style with regular Compose logic. The map animates the transition between styles. For example, select a style from the system theme:

App.kt

val variant = if (isSystemInDarkTheme()) "dark" else "light"
MaplibreMap(
  baseStyle = BaseStyle.Uri("https://api.protomaps.com/styles/v4/$variant/en.json?key=MY_KEY")
)

Load a local style

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

App.kt

MaplibreMap(baseStyle = BaseStyle.Uri(Res.getUri("files/style.json")))