determining circle-color with nested expressions

I use a GeoJSON as my source, where every entity has a state. I want to draw circles for every entity, where the circle color is based on the state, and whether the circle has been clicked or not.

Determining the “clicked-state” is done via setFeatureState() where a feature receives the “click” state when clicked.

I tried to first check for the click state and match the state, based on the feature being clicked or not:

    "circle-color": [
        'case',
        ['boolean',
            ['feature-state', 'click'],
            false,
        ],
        ['match',          //Feature clicked = true
            ['get', 'state'],
            'SOME_FEATURE_STATE_STRING',
            '#57E757',  // possible match
            'SOME_OTHER_FEATURE_STATE_STRING',
            '#123456',  // possible match

            '#123456' //fallback
        ],
        '#001ebe'           //Feature clicked = false
    ]

The “unclicked” circle has the correct color. However, when I click the circle, the circle-color is changed to black and not my “match” color.

Any advice is greatly appreciated!

Answer

I think your case expression is incorrect here :

['boolean', 
  ['feature-state', 'click'],
  false,
],

You have used the boolean types expression, which is a type expression (it asserts that the input value is a boolean).

In your case, you want to use a decision expression.

With the == operator, you can return true if the input values are equal, false otherwise.

Your case expression would become :

"circle-color": [
 'case',
 ['==', ['feature-state', 'click'], true],
 ['match',     // Feature clicked = true
   ['get', 'state'],
   'SOME_FEATURE_STATE_STRING',
   '#57E757',  // Possible match
   
   'SOME_OTHER_FEATURE_STATE_STRING',
   '#123456',  // Possible match
   
   '#123456'   // Fallback
 ],
 '#001ebe'     // Feature clicked = false
]