Using updateTriggers to change fill color in React

[kamrankhanwastaken]

I am trying to update the fill color for a feature within a geojson feature collection object when someone hovers over a particular one on the map. I am using updateTriggers but unsure why this won't work:

...
const [hoverInfo, setHoverInfo] = React.useState(false);
...
new GeoJsonLayer({
  id,
  data
  pickable: true,
  stroked: true,
  filled: true,
  extruded: false,
  lineWidthMinPixels: 1,
  getLineColor: [150, 150, 150, 255],
  lineJointRounded: true,
  getFillColor: (d) => {
    if (hoverInfo.index === d.properties.order) {
      return [...d.properties.fill, 255];
    }
    return [...d.properties.fill, 130];
  },
  onHover: (info) => {
    setHoverInfo({
      index: info.index,
      x: info.x,
      y: info.y,
    });
  },
  updateTriggers: {
    getFillColor: hoverInfo.index,
  },
}),
]);

I am changing the state for hoverInfo inside onHover and then using that to track changes to getFillColor in updateTriggers. Lastly, in the function I check if the order attribute of the feature is the same as the hoverInfo.index one. The logic makes sense to me but nothing is happening.

[kamrankhanwastaken]

I was able to get this to work through a workaround by using the autoHighlight and highlightColor attributes:

...
new GeoJsonLayer({
  id,
  data
  pickable: true,
  stroked: true,
  filled: true,
  extruded: false,
  lineWidthMinPixels: 1,
  getLineColor: [150, 150, 150, 255],
  lineJointRounded: true,
  autoHighlight: true,
  highlightColor: (d) => [...d.object.properties.fill, 200],
  getFillColor: (d) => [...d.properties.fill, 130],
})
...

The only problem is that on hovering over a particular index sometimes it will highlight the line layer and not the polygon layer. Is there a way to avoid that?

[kamrankhanwastaken]

Ah! Is there a bug task in the issues tab that you could link me to if one exists? If not, should I create one? Thank you!

[kamrankhanwastaken]

I'm using [email protected] just FYI.

[Pessimistress]

The fix is unlikely to be back ported to 8.4 because it is 1) too big as a patch and may introduce unintended breakages 2) technically a breaking behavioral change.

[kamrankhanwastaken]

Sorry I misread your initial comment and thought you meant it is a bug in 8.5.0-alpha. Am I able to use that version in my project? When I run npm i [email protected] it can't find any packages.

[Pessimistress]

deck.gl@^8.5.0-alpha