mapbox / mapbox/mapbox-gl-js

feature-state and condition on nested objects in properties are breaks the expression for "fill-color"

Open
#12,231 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle:
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.