react-globe.gl: onPolygonClick won't trigger

Describe the bug When performing a left click onPolygonClick is not called. I do notice however the function is called when the onPolygonRightClick prop is passed and triggered.

To Reproduce Steps to reproduce the behavior:

Create an instance of Globe Element.
Ensure polygonsData is correctly populated.
Pass function to onPolygonClick prop. 4.Attempt to call onPolygonClick by left-clicking

Expected behavior The function passed as a parameter should be executed.

Additional context Here’s an example of the instance.

	<Globe
			ref={globeEl}
			globeImageUrl='//unpkg.com/three-globe/example/img/earth-night.jpg'
			backgroundImageUrl='//unpkg.com/three-globe/example/img/night-sky.png'
			polygonsData={countries.features}
			polygonAltitude={d => (d === hoverD ? 0.12 : 0.06)}
			polygonCapColor={d => (d === hoverD ? "green" : "black")}
			polygonSideColor={() => "rgba(0, 100, 0, 0.15)"}
			polygonStrokeColor={() => "#111"}
			polygonLabel={({ properties: d }) => getPolygonLabel(d)}
			onPolygonHover={setHoverD}
			onPolygonClick={polygon => global.console.log("polygon", polygon)}
			polygonsTransitionDuration={300}
		/>

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

Ah, good catch! I believe the effect is mainly due to the auto-rotation of the globe. If you click down and hold (such as force clicking down on the mac pad) it is interpreted as a drag because the globe is moving. And drag interactions intentionally do not trigger click events.

I think the best way to handle this is to cancel the globe rotation as soon as the user drags the canvas, which signals the intent to control the globe, and the default motion should be let go off.

You can do that by adding an event handler to the controls start interaction:

globeEl.current.controls().addEventListener('start', 
  () => { globeEl.current.controls().autoRotate = false; }
);

Let me know if that works for your use case.

vasturiano on Apr 5, 2020