Responsively change initial zoom

[mledwards]

Is it possible to responsively change the zoom of the globe?

I initially tried responsively changing the value for initialCameraDistanceRadiusScale but that made the whole globe disappear.

I also tried changing the value for cameraDistanceRadiusScale but that seemed to have no effect (even though it works with most other options).

Maybe a simpler question is how do you programmatically change the zoom of the map?

Hope you can help!

[mledwards]

It looks like the size of the globe is linked to the height of the globe, so to workaround my query above I'm setting the height to "130vh" on larger desktops, using CSS to bump the globe up by half (15vh) and then hiding the excess. See partial code examples below.

React

import { useResizeDetector } from "react-resize-detector";
const { width, height, ref } = useResizeDetector();

  if (width >= device.lg) {
    globeResponsiveness = {
      width: "100vw",
      height: "130vh",
    };
  }

CSS

const GlobeWrapper = Styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;

  @media ${device.huge} {  
    height: calc(100% + 15vh);
    top: -15vh;
  }
`;

[arausly]

I had a similar problem where I wanted controls to zoom in and zoom out. I hope this helps anyone

const [globe, setGlobe] = React.useState<any>()

const scaleToValue = (value: number, step = 1) => {
    let counter = 1;
    let animationId;
    const loop = () => {
      globe.camera.position.z += step;
      const scene = globe.scene;
      globe.renderer.render(scene, globe.camera);
      step > 0 ? ++counter : --counter;
      animationId = requestAnimationFrame(loop);
      if (counter === value) {
        cancelAnimationFrame(animationId);
      }
    };
    requestAnimationFrame(loop);
  };



React.useEffect(() => {
      if (globe) {
        if (zoomMode === ZOOM_MODES.in) {
          scaleToValue(10);
        } else if (zoomMode === ZOOM_MODES.out) {
          scaleToValue(-10, -1);
        }
      }
  }, [globe]);