I am trying to disable zoom on Globe element from react-globe.gl library. I was able to fix it by using this code:
const globeEl = useRef<GlobeMethods>();
const N = 20;
const arcsData = [...Array(N).keys()].map(() => ({
startLat: (Math.random() - 0.5) * 180,
startLng: (Math.random() - 0.5) * 360,
endLat: (Math.random() - 0.5) * 180,
endLng: (Math.random() - 0.5) * 360,
color: [
["red", "white", "blue", "green"][Math.round(Math.random() * 3)],
["red", "white", "blue", "green"][Math.round(Math.random() * 3)],
],
}));
const globeMaterial = new MeshPhongMaterial();
globeMaterial.color = new Color(0x3a228a);
globeMaterial.emissive = new Color(0x220038);
globeMaterial.emissiveIntensity = 0.1;
globeMaterial.shininess = 0.7;
useEffect(() => {
if (globeEl.current !== undefined && globeEl.current.controls) {
globeEl.current.controls().enableZoom = false;
globeEl.current.controls().autoRotate = true;
globeEl.current.controls().autoRotateSpeed = 0.7;
}
}, []);
return (
// other elements
<Globe
arcsData={arcsData}
arcColor={"color"}
arcDashLength={() => Math.random()}
arcDashGap={() => Math.random()}
arcDashAnimateTime={() => Math.random() * 10000 + 500}
arcAltitude={0.33}
hexPolygonsData={countries.features}
hexPolygonResolution={3}
hexPolygonMargin={0.7}
showAtmosphere={true}
atmosphereAltitude={0.25}
height={700}
width={600}
atmosphereColor="#483685"
backgroundColor="rgba(0, 0, 0, 0)"
globeMaterial={globeMaterial}
ref={globeEl}
/>
// other elements
);
Then there was a issue: window not defined for which i had to change the import to something like this:
const Globe = dynamic(import("react-globe.gl"), { ssr: false });
Now useEffect() block is not working. Also I added the extra polygon data and globe material afterwards. I dont know which of theses is causing the problem
I have tried disabling customization one by one but none of these are solving the problem. Thanks in advance