Catch Event in react-leaflet map

Question

I wounder how I can catch zoomstart and zoomend events on react-leaflet map component.

I have some custom non-geographics map

            <Map
                center={this.getCalculatedCenterFromState()}
                zoom={this.getCalculatedZoomFromState()}
                minZoom={this.getCalculatedMinZoomFromState()}
                maxZoom={2}
                attributionControl={false}
                doubleClickZoom={false}
                zoomControl={false}
                crs={this.mapService.getProjectionType()}
            >



                <ZoomControl position={'topright'} zoomInText={"<img src=" + this.mapService.getPlusIconPath() + " alt='plus' />"} zoomOutText={"<img src=" + this.mapService.getMinusIconPath() + " alt='minus' />"} />
                <CategoryControl />
                <Layers data={this.showPlanService.getJSONResponse()} />

            </Map>

And I need to show and hide some components depends on zoom level.

@megamit Yes bro, This is work. I just make some mistake in handler method (TODO comment without output) But I was sure that there is some alert() method. — Stevan Tosic, Jan 15 '18 at 13:25

score 0 · Accepted Answer · answered Jan 15 '18 at 13:35

0

Problem is always trivial :)

On this URL is native leaflet events

http://leafletjs.com/reference-1.2.0.html#map-event

To use them in React-leaflet you need to add ass attribute event as following ( on + event name) I must add that event caller is not case sensitive

i.e

<Map ...  onZoomStart={this.handleZoomStart} onMoveEnd={this.handleMoveEnd} ...> 
</Map

answered Jan 15 '18 at 13:35

Stevan Tosic

6,561
10
55
110

How did you import ? I imported it as `import { MapContainer as Map } from 'react-leaflet';` but the onLoad, onload, load attributes are not firing – BonisTech Nov 24 '20 at 21:33
https://stackoverflow.com/questions/49441600/react-leaflet-marker-files-not-found/51222271#51222271 Map Container is not a valid React Leaflet component if I am not wrong. – Stevan Tosic Nov 25 '20 at 16:10
2

Well, it's working for me. If I try to import Map ibstead of MapContainer I get and error. Can you tell me wich library you're using and what version. Seems as if Map has far more options than MapContainer – BonisTech Nov 27 '20 at 07:12

Catch Event in react-leaflet map

1 Answers1