Add data to the map

The base style defines the map’s content. To show your own data on top of it, declare sources and layers inside the MaplibreMap block. A source holds the data, and a layer draws data from a source.

Reference a base style source

getBaseSource looks up a source that the base style defines, so a layer of yours can draw data that the style already loads:

App.kt

MaplibreMap(baseStyle = BaseStyle.Uri("https://tiles.openfreemap.org/styles/liberty")) {
  getBaseSource(id = "openmaptiles")?.let { tiles ->
    CircleLayer(id = "example", source = tiles, sourceLayer = "poi")
  }
}

Declare your own source

rememberGeoJsonSource creates a source from a GeoJSON URI or string. Layers reference the source object directly:

App.kt

MaplibreMap {
  val amtrakStations =
    rememberGeoJsonSource(GeoJsonData.Uri(Res.getUri("files/data/amtrak_stations.geojson")))

  val amtrakRoutes =
    rememberGeoJsonSource(GeoJsonData.Uri(Res.getUri("files/data/amtrak_routes.geojson")))
  LineLayer(
    id = "amtrak-routes-casing",
    source = amtrakRoutes,
    color = const(Color.White),
    width = const(6.dp),
  )
  LineLayer(
    id = "amtrak-routes",
    source = amtrakRoutes,
    color = const(Color.Blue),
    width = const(4.dp),
  )
}

Other source types cover vector tiles, raster tiles, and images. The API reference documents them under org.maplibre.compose.sources.

Style a layer with expressions

Layer properties accept expressions: formulas that the map evaluates at render time. Wrap a constant value in const. Functions such as interpolate and zoom build dynamic values:

App.kt

LineLayer(
  id = "amtrak-routes",
  source = amtrakRoutes,
  cap = const(LineCap.Round),
  join = const(LineJoin.Round),
  color = const(Color.Blue),
  width =
    interpolate(
      type = exponential(1.2f),
      input = zoom(),
      5 to const(0.4.dp),
      6 to const(0.7.dp),
      7 to const(1.75.dp),
      20 to const(22.dp),
    ),
)

Expressions in Kotlin explains the expression system. The MapLibre Style Specification documents every layer type and property.

Anchor a layer in the stack

By default, your layers draw above the base style layers. Anchor inserts a layer at another position: at the Bottom, at the Top, Above or Below a named base layer, or as a Replacement for a base layer:

App.kt

Anchor.Above("road_motorway") { LineLayer(id = "amtrak-routes", source = amtrakRoutes) }