Styling the map

Acquiring a style

Every MapLibre map requires a style to be displayed. The style is a JSON object that describes what data to display and how to display it. Typically, vector tile providers create styles designed to work with their data, and provide them as a URI. You can also create your own styles using Maputnik, a visual style editor for MapLibre styles.

There are a variety of free and commercial map tile providers available. See the awesome-maplibre repository for a list of tile providers. This documentation primarily uses OpenFreeMap and Protomaps. Both of these are free tile providers with their own styles.

Using a style

To use a style, you can pass the styleUri of your chosen style to the MaplibreMap composable:

MaplibreMap(styleUri = "https://tiles.openfreemap.org/styles/liberty")

Dark mode

You can select a style at runtime based on regular Compose logic. MapLibre will automatically animate the transition between styles. This is handy if you have a light and a dark mode style:

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

Local styles

While styles are typically hosted on the internet, you can also load a local style with Compose Multiplatform resources:

MaplibreMap(styleUri = Res.getUri("files/style.json"))