Closed ValeryVS closed 3 years ago
@ValeryVS I think you should pass zoom param to Map state
:
import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import { YMaps, Map } from "react-yandex-maps";
import "./styles.css";
function App() {
const [minZoom, setMinZoom] = useState(15);
const setMinZoom8 = useCallback(() => {
setMinZoom(8);
}, []);
const clearMinZoom = useCallback(() => {
setMinZoom(15);
}, []);
return (
<div className="App">
<button type="button" onClick={setMinZoom8}>
setMinZoom8
</button>
<button type="button" onClick={clearMinZoom}>
clearMinZoom
</button>
<Map
// You should change zoom with Map state
state={{ center: [55.751574, 37.573856], zoom: minZoom }}
options={{
vector: true,
layerVectorRevealThreshold: 0,
layerVectorCustomization: [
...
]
}}
modules={["vectorEngine.preload"]}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<YMaps
query={{
ns: "ymaps" // this nemaspace required for vector maps
}}
>
<App />
</YMaps>,
rootElement
);
@mmarkelov Then it will be default zoom, not the minimum zoom — user will be able to zoom out too far.
@ValeryVS got it. If want to set up minZoom
, you just need pass it to your options:
<Map
instanceRef={setRef}
defaultState={{ center: [55.751574, 37.573856], zoom: 9 }}
options={{
minZoom,
vector: true,
...
}}
/>
I see. Thought that options merged with default options, but it is not. Good, that it works.
Reproduce on codesandbox.
Uncomment
// options={{ minZoom }}
to see the bug.Workaround: use native maps API through ref.
https://codesandbox.io/s/react-yandex-maps-vector-dqlx3?file=/src/index.js