mapbox-gl-js icon indicating copy to clipboard operation
mapbox-gl-js copied to clipboard

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

Open igor-dv opened this issue 3 years ago • 0 comments

mapbox-gl-js version: 2.10.0

browser: chrome

Steps to Trigger Behavior

Hello !

Considering we have a following geojson:

{ 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:

[
    '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

igor-dv avatar Sep 11 '22 11:09 igor-dv