feature-state and condition on nested objects in properties are breaks the expression for "fill-color"
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**:
2.10.0
**browser**:
chrome
### Steps to Trigger Behavior
Hello !
Considering we have a following geojson:
```js
{ type: 'FeatureCollection', features: [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[ -97.43889857398487, 37.985987347873404 ],
[ -97.52047522675579, 37.982241879810815 ],
[ -97.5085951316918, 37.948524064867684 ],
[ -97.43256252328425, 37.95352027367895 ],
[ -97.43889857398487, 37.985987347873404 ]
]
]
},
"properties": {
"id": "abc1234",
"name": "Polygon Small",
"severities": {
"minor": 1
},
}
}
]
}
```
the features here have a "severities" object in properties and we want to color each polygon with the color based on existence of that or another severity.
also we want to change the color when hovering the polygon. (right now we are using fill-opacity to work around the issue)
I used the following filter for the `fill-color` prop:
```js
[
'case',
['boolean', ['feature-state', 'hover'], false],
[
'case',
['has', 'minor', ['get', 'severities']],
'#00FF00',
'#0000FF',
],
[
'case',
['has', 'minor', ['get', 'severities']],
'#009900',
'#000099',
],
]
```
Initially, the polygon is colored with the right color (`#009900`), but when hovering it (and adding the feature state) it becomes black and there is a warning in console saying "Expected value to be of type object, but found string instead".
If I change the condition to have `['>=', ['index-of', 'minor', ['get', 'severities']], 0]` the filter start working after the hover (hinting me that the nested object changed to string ?), but of course this brakes the initial state, when the "severities" object is till an object.
### Link to Demonstration
(without the token)
https://codepen.io/igor-dv/pen/dyeXNvK
### Expected Behavior
The filter should work with feature-state and nested objects
### Actual Behavior
getting an "Expected value to be of type object, but found string instead" error, and the filter breaks coloring the polygon in black color
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the CodePen reproduction and the fill-color expression that combines feature-state with ['get', 'severities'] and ['has', 'minor', ...]. Trace how the expression is evaluated before and after hover state is added, then add coverage for nested object properties with feature-state. Done means the polygon keeps the expected hover and non-hover colors without the object-versus-string warning.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100