CODEWITHSUNDEEP
javascriptleaflet
Neelotpal
Neelotpal

Reputation: 347

How to detect if leaflet map is zoomed in or zoomed out?

Leaflet has the events 'zoomstart' and 'zoomend', but I want to know if the map is zoomed in or zoomed out, after the zoom event.

edit1:

I have added a fiddle, but this dosen't work correctly: http://jsfiddle.net/LnzN2/1940/

var prevZoom = map.getZoom();

map.on('zoomstart',function(e){
  debugger;
  var currZoom = map.getZoom();
  var diff = prevZoom - currZoom;
  if(diff > 0){
    alert('zoomed in');
  } else if(diff < 0) {
    alert('zoomed out');
  } else {
    alert('no change');
  }
  prevZoom = currZoom;
});

Upvotes: 5

Views: 8477

Answers (1)

richardevcom
richardevcom

Reputation: 1058

Just change the zoomstart to zoomend as the library updates the levels after zooming is done.

Also when the value is -1 it reduces the zoom level therefor it means you've zoomed in, but you had it the other way around.

Changed all that and seems to me that fixed the issue. Check snippet below. And here is the updated fiddle http://jsfiddle.net/LnzN2/1965/

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {
	   maxZoom: 18,
	   attribution: osmAttrib
});

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([0,0], 2).addLayer(osm);
var prevZoom = map.getZoom();
    
map.on('zoomend',function(e){
	debugger;
	var currZoom = map.getZoom();
    var diff = prevZoom - currZoom;
    if(diff > 0){
  	   alert('zoomed out');
    } else if(diff < 0) {
  	   alert('zoomed in');
    } else {
  	   alert('no change');
    }
    prevZoom = currZoom;
});
#map {
    height: 500px;
    width: 80%;
}
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="map"></div>

Upvotes: 12

Related Questions