Hover Effect with vector tiles

[josejachuf]

I am trying to do something similar to the example of "Hover Effect" [1], but instead of using a geojson, my source is a vector tile.

One difference is that the "id" does not come directly from e.features[0].id, but is in e.features[0].properties.id

    map.value?.on('mousemove', 'state-fills', (e) => {
      if (e.features && map.value) {

        if (e.features.length > 0) {
          if (hoveredPolygonId !== undefined) {
            map.value.setFeatureState(
              { source: 'states', id: hoveredPolygonId, sourceLayer: 'state-fill' },
              { hover: false }
            );
          }
          hoveredPolygonId = e.features[0].properties.id;
          map.value.setFeatureState(
            { source: 'states', id: hoveredPolygonId, sourceLayer: 'state-fill' },
            { hover: true }
          );
        }
      }
    });

Everything else is the same. I can validate that hoveredPolygonId has a value and is the one that corresponds to the selected polygon.

I also check that no error occurs, but I can't highlight the polygon

[1] https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/

[josejachuf]

I solved it using:

​promoteId: 'id'