How to Display Dynamic Per-Event Images in SymbolLayer

[MAXBAF1]

Hi, I'm trying to render a list of events on the map, each with its own unique icon (fetched from a URL and dynamically generated with a custom border).

In MapLibre Native, I would load these icons into the style using style.addImage() and reference them in a SymbolLayer via iconImage. However, in MapLibre Compose, I can't find a clear way to do this.

---

🧩 Goal

• For each event, display a corresponding marker with its own custom image.
• Icons are downloaded and pre-processed before being shown (e.g., adding borders).
• Each image should appear at the corresponding event’s coordinates.

---

🔍 What I’ve Tried

Below is a simplified version of my current setup:

@Composable
fun EventsOverlay(events: List<EventDTO>) {
    val context = LocalContext.current
    val borderColor = JetAroundTheme.colors.secondaryBackground

    val features = remember { mutableStateListOf<Feature>() }
    val icons = remember { mutableStateMapOf<String, Bitmap>() }

    LaunchedEffect(events) {
        features.clear()
        icons.clear()

        events.forEach { event ->
            val imageId = "event_${event.id}"

            MarkerUtils.getMarkerIcon(
                context = context,
                imageUrl = event.image,
                iconTransformer = { bitmap ->
                    getEventMarkerIcon(
                        imageBitmap = bitmap,
                        size = MapConstant.Styling.MARKER_SIZE,
                        borderWidth = MapConstant.Styling.EVENT_BORDER,
                        borderColor = borderColor.toArgb(),
                    )
                },
            ) { icon ->
                icons[imageId] = icon

                val feature = Feature(
                    Point(Position(event.location.lng, event.location.lat))
                ).apply {
                    setStringProperty(MapConstant.Styling.ID_EVENT_ICON, imageId)
                    setNumberProperty(MapConstant.Styling.ID_EVENT_ID, event.id)
                }

                features.add(feature)
            }
        }
    }

    val source = rememberGeoJsonSource(
        data = GeoJsonData.Features(FeatureCollection(features)),
        options = GeoJsonOptions(cluster = true),
    )

    SymbolLayer(
        id = MapConstant.Styling.ID_EVENTS_LAYER,
        source = source,
        iconImage = ???
    )
}

As you can see, I don’t know how to:

1. Register dynamically generated Bitmaps (icons) with the map style

2. Reference them via iconImage using an expression like get("icon_id")

❓ Question

• How can I dynamically add per-feature images to the style in MapLibre Compose?

• Is there an equivalent of style.addImage(id, bitmap) available?

• How can I reference these dynamic image IDs from within SymbolLayer.iconImage?

[sargunv]

#468 is basically what you are requesting.

In the meantime, if your list of images isn't huge, you can use a switch expression to dynamically select them: #451 (comment)

All images referenced in your expression will be loaded automatically.