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!
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
]