setFeatureState not updating a value in Mapbox

Question

I am trying to change the color of a marker which is a circle, that is being painted using the paint property on a layer.

Following this tutorial:
https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

I have set the circle-color to be dependent of a feature-state:

          map.addLayer({
        id: "singles",
        type: "circle",
        source: "users",
        filter: ["!has", "point_count"],
        paint: {
            'circle-radius': {
                'base': 10,
                'stops': [[5, 20], [15, 500]]
            },
            'circle-color':  ["case",
            ["boolean", ["feature-state", "hover"], false],
            '#ddffc8',
            '#ff0000'
            ],
          }
      });

Then when somebody hovers over a sidebar, I want to update the feature-state and change the color:

function highlightMarkersOnHoverOnSidebar (markers, map) {
  let marks = markers
  Array.from(document.querySelectorAll('.sideBarItems')).map( (x, i) => {

    x.addEventListener('mouseenter', function(){

      map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: true});
    }, false)

    x.addEventListener('mouseleave', function(){
      map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: false});

    }, false)
  })
}

However, nothing happens when i hover the sidebar element.. and it doesnt even throw an error.

Is there anything im missing? thanks.

Adrian Adrian · Accepted Answer · 2021-04-07T06:54:34

I also run into this issue. It seems like you need an id at the feature level in your geojson. Not in the properties:

{
  "type": "FeatureCollection",
  "features": [
    {
      "id": 4459,
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          8.64543,
          50.163105
        ]
      },
      "properties": {
        "id": "NOT HERE",
        "name": "Test",
        "foo": "bar",
      }
    }
  ]
}

Moving the id to the feature solved the issue.

setFeatureState not updating a value in Mapbox

2 Answers