**I would like to add a button next to the map, after clicking which I will be able to change the zoom of the map. ** Is this feasible in the new version of react-leaflet?
Example scenario: I display a map of the country with zoom 7, above the map I have a few buttons with the names of cities, after clicking on the button, I would like to move to this place and increase the zoom to 9.
i tried using ref and looked at the documentation, in older versions it worked.
It was enough to use useState() and change the zoom value.
Ok, i needed to use useRef() and flyTo.
const mapRef = useRef();
...
<button type="button" onClick={handleClick}> Warsaw </button>
<MapContainer center={position} zoom="7" ref={mapRef}>
...
const handleClick = () => {
mapRef.current.flyTo([52.0121, 20.585842], 12);
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.