Анимация изменения zoom карты со своими кнопками

[ulad-f]

Как изменять zoom своими кнопками и при этом что бы была анимация как при нажатии на стандартные кнопки? Пример react api: https://yandex.com/dev/maps/jsbox/2.1/zoom_layout

[mmarkelov]

@aspirin-vd как-то так:

export default function App() {
  const [zoom, setZoom] = useState(9);

  return (
    <div>
      <YMaps>
        <Map state={{ center: [55.751574, 37.573856], zoom }} />
      </YMaps>
      <div>
        <button onClick={() => setZoom(zoom + 1)}>Zoom in</button>
        <button onClick={() => setZoom(zoom - 1)}>Zoom out</button>
      </div>
    </div>
  );
}

[ulad-f]

@aspirin-vd как-то так:

export default function App() {
  const [zoom, setZoom] = useState(9);

  return (
    <div>
      <YMaps>
        <Map state={{ center: [55.751574, 37.573856], zoom }} />
      </YMaps>
      <div>
        <button onClick={() => setZoom(zoom + 1)}>Zoom in</button>
        <button onClick={() => setZoom(zoom - 1)}>Zoom out</button>
      </div>
    </div>
  );
}

У меня на данный момент так реализовано, но анимации отдаления и приближения карты нет, а хотелось бы её добавить

[mmarkelov]

@aspirin-vd я вас понял. Придется тогда так:

export default function App() {
  const map = React.useRef(null);
  const [zoom, setZoom] = useState(9);

  useEffect(() => {
    if (map.current) {
      map.current.setZoom(zoom, { duration: 300 });
    }
  }, [zoom]);

  return (
    <div>
      <YMaps>
        <Map
          instanceRef={map}
          defaultState={{ center: [55.751574, 37.573856], zoom: 9 }}
        />
      </YMaps>
      <div>
        <button onClick={() => setZoom(zoom + 1)}>Zoom in</button>
        <button onClick={() => setZoom(zoom - 1)}>Zoom out</button>
      </div>
    </div>
  );
}

[ulad-f]

Благодарю