Add images and icons

A SymbolLayer draws an icon at each feature in its source. The image expression supplies the icon, from a Compose painter, an ImageBitmap, or the base style’s sprite.

Draw icons from a Compose painter

Pass a painter to image(). The library rasterizes it and registers it with the style. This works with painterResource, vector drawables, and any other painter:

App.kt

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

  SymbolLayer(
    id = "station-icons",
    source = stations,
    iconImage = image(painterResource(Res.drawable.map_24px), size = DpSize(24.dp, 24.dp)),
  )
}

Draw icons from the style sprite

Base styles usually bundle a sprite: a named set of icons. Pass the icon name to image():

App.kt

MaplibreMap {
  SymbolLayer(id = "station-markers", source = stations, iconImage = image("marker"))
}

Place an image on the map

An ImageSource positions one image on the map by its four corner coordinates. A RasterLayer draws it:

App.kt

MaplibreMap {
  val corners =
    PositionQuad(
      topLeft = Position(longitude = -74.0178, latitude = 40.7040),
      topRight = Position(longitude = -74.0118, latitude = 40.7100),
      bottomRight = Position(longitude = -74.0060, latitude = 40.7067),
      bottomLeft = Position(longitude = -74.0120, latitude = 40.7006),
    )
  val plan = rememberImageSource(position = corners, uri = Res.getUri("files/castello-plan.jpg"))
  RasterLayer(id = "castello-plan", source = plan, opacity = const(0.8f))
}