OnHexHover & OnHexClick don't seem to work

[joseph-allen]

Describe the bug When hovering over a Hex in a HexBin layer no event seems to fire.

I've replicated this with the following props

        hexBinPointsData={popData}
        hexBinPointWeight="val"
        hexAltitude={d => d.sumWeight * 0.01}
        hexBinResolution={2}
        hexSideColor={d =>  d === hoverD ? weightColor(1) : weightColor(d.sumWeight)}
        hexTopColor={d =>  d === hoverD ? 'red' : 'green'}
        hexBinMerge={true}
        onHexHover={() => {
          console.log('Hovered over hex:');
        }}

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome

[joseph-allen]

[joseph-allen]

The docs do say hexBinMerge must be set to false, which is wasn't when I opened this.

Setting that to false does allow the console log to work, but not the color changes when I use onHexHover={setHoverD}

[joseph-allen]

I was replicating the chloropleth example, but I've realised my mistake here is using polygons, assuming the entire hex object was a sinlge object, which it isn't it's 6 sides and a cap.

https://github.com/vasturiano/react-globe.gl/blob/master/example/choropleth-countries/index.html#L47

I've noticed I can dig a bit into the object and get a shared ID however.

[joseph-allen]

It's a bit finnicky, I will close this issue but this doesn't feel quite intended. It seems while the objects are not the same, they do share an ID property h3Idx

  const [hoverD, setHoverD] = useState(null);

  <Globe
          hexSideColor={d =>  d.h3Idx === hoverD ? 'green' : weightColor(d.sumWeight)}
          hexTopColor={d => d.h3Idx === hoverD ? 'green' : weightColor(d.sumWeight)}
          onHexHover={d => d?.h3Idx && setHoverD(d.h3Idx)}
  />