How can I get the current Leaflet map zoom level?

ODLana

I'm trying to get the zoom level of a map in real time to make a button that locks the zoom with the current value. I have tried using getMapZoom and getZoom but both give me an undefined value. I think I'm not using the correct ref but I haven't been able to find much documentation about it. Here's the code:

<Map className="map-layer" 
          center={center} 
          onoverlayadd={this.overlayadd} 
          onoverlayremove={this.overlayremove}
          ondragend={this.zoomChange}
          onzoomend={console.log('Zoom: ' + this.mapRef.leafletElement.getMapZoom())}
          zoom={this.state.zoom}
          ref={this.mapRef}
          preferCanvas={false}
          animate={true}
          scrollWheelZoom={this.state.zoomLock ? false : true}
          doubleClickZoom={this.state.zoomLock ? false : true}
          touchZoom={this.state.zoomLock ? false : true}
          maxZoom={7}
          minZoom={7}

                    >
radulle

In pure leaflet if you defined map as const map = L.map("map", options) than you just call map.getZoom().

In constructor this.mapRef = React.createRef() In Map element:

    ref={this.mapRef}
    onzoomend={() => console.log(this.mapRef.current.leafletElement.getZoom()}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I get current zoom level from Google Map Api v2?

How to get the zoom level from the leaflet map in R/shiny?

three.js perspectiveCamera + orbitControl how I can get current "zoom" level?

How can I read current zoom level of Mapbox?

How can I set the Zoom Level on my Bing Map?

How can I detect a change in zoom level in mapbox map?

How to change cluster zoom level on click with Leaflet map?

How to get Map object in react-leaflet on zoom change event

Given a collection of Locations, how can I determine the appropriate Zoom level and Map Center for Bing Maps?

How to get current zoom level using gmaps.js?

How can I change zoom based on markers in Leaflet?

How can I get the map object for a Leaflet map from the ID of the div element?

How do I limit the Zoom level of my map, Mapbox

How to get the current zoom of the map [getZoom()] in react-google-maps?

Using svg.js and svg-pan-zoom how can I get current "viewport" center point?

Leaflet- Finding the Zoom Level Of Bounds Without Using a Map Instance

How to detect zoom change in flutter leaflet map?

Using R and Leaflet, how can I get my map to display numbers formatted with commas?

How can I decrease zoom level in my web app?

How can I display a UILabel on MKMapView at a specific zoom level?

How can I manage the zoom level in Google Maps in android

How can I get zoom functionality for images?

Leaflet Zoom Map Layer

how to get the current zoom in openlayers

How can we set zoom level in selenium/protractor i.e zoom to 90%

Mapbox for Android: Change map input based on current zoom level

How check if marker is within viewport in Leaflet, given center and zoom level?

How to set zoom level in google map

How to display Google Map zoom level in Div