Unable to disable zoom on Globe element from react-globe

170 Views Asked by At

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

0

There are 0 best solutions below