Mapbox symbol layer's `.iconColor()` does not set icon color

Question

After retrieving the poi-label symbol layer, I am trying to set the color of all icons from green to red. I do this with the following code:

    map.loadStyleUri(context.getString(R.string.mapbox_style)) { style ->
        style.getLayerAs<SymbolLayer>("poi-label").let {
            it?.iconColor("#ff0000")
            it?.textColor("#ff0000")
        }
    }

This produces:

The textColor property of #ff0000 is applied but the icon color is not. It remains green when it should be red.

I have tried using other properties like haloColor as well as using Expressions to color the icon but these did not work either.

I am using Mapbox common SDK v23.1.1 & Mapbox Core Maps SDK v10.9.1

Answer 1

At the moment, this is not possible with icons inside a circle.

According to Mapbox's documentation, icon-color can only be used with SDF icons and not these icons.

See more on IconColor here.

There is also a discussion around supporting feature-state to allow changing properties of features (potentially the icon/color of POIs). This is something wanted by users but doesn't seem to have made any progress through the backlog since 2020: https://github.com/mapbox/mapbox-gl-js/issues/9303

Answer 2

In Mapbox version 10 You can use this:

make sure you enable the SDF true and then use the color as feature property to make it dynamic

Below is the example code

 mapView.getMapboxMap().loadStyle(
        styleExtension = style(Style.TRAFFIC_NIGHT) {

           
            +image(PICNIC_AREA) {
                bitmap(drawableIdToBitmap(requireContext(), R.drawable.ic_bathroom))
sd(true)//Important Point this should be enable to work icon color
            }

            +symbolLayer(LAYER_ID, SOURCE_ID) {
                sourceLayer(CIRLCE_LAYER_ID)

               iconImage(PICNIC_AREA)
                iconColor("#FFFFFF")//here you can manage your icons colors similar to the icons' way

                // Text based mapbox utils data or getting values
                textField(
                    Expression.get(TEXT_KEY)
                )
                textColor("#FFFFFF")

            }
        }

    )