javascript - react-leaflet v3 zoom listener - Stack Overflow

admin管理员组

文章数量:1326322

I'm trying to subscribe on zoom change event, but can't get updates on each zoom change.

My goal is to reach markers scaling on zoom levels. Something like in this case React-Leaflet: Scale markers after zooming

But react-leaflet in v3 doesn't have onZoomChange event for MapContainer. So i can't get zoom updates for scaling my DivIcon

I'm trying to subscribe on zoom change event, but can't get updates on each zoom change.

My goal is to reach markers scaling on zoom levels. Something like in this case React-Leaflet: Scale markers after zooming

But react-leaflet in v3 doesn't have onZoomChange event for MapContainer. So i can't get zoom updates for scaling my DivIcon

• javascript
• reactjs
• leaflet
• react-leaflet

Share Improve this question Follow asked Dec 17, 2020 at 9:21 BaoTheMastrBaoTheMastr 12111 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

found the solution with useMapEvents hook provided in react-leaflet v3:
https://react-leaflet.js/docs/api-map#usemapevents

import {useMapEvents} from "react-leaflet";
import {useState} from "react";

function MyComponent() {
    const [zoomLevel, setZoomLevel] = useState(5); // initial zoom level provided for MapContainer
    
    const mapEvents = useMapEvents({
        zoomend: () => {
            setZoomLevel(mapEvents.getZoom());
        },
    });

    console.log(zoomLevel);

    return null
}

function MyMapComponent() {
    return (
        <MapContainer center={[50.5, 30.5]} zoom={5}>
            <MyComponent />
        </MapContainer>
    )
}

本文标签： javascriptreactleaflet v3 zoom listenerStack Overflow