2

I would like to detect whenever a user tries zooming but fails due to reaching minZoom/maxZoom of the map. From what I understand, zoom/ zoomstart/zoomend will not be fired as there is no actual animation.

Maybe there's an easy solution. But if not, I could perhaps fire an event manually whenever something happens that could be triggering zoom. I haven't figured out how, though. Probably this is all wrong:

L.Map.ScrollWheelZoom.addInitHook(function() {
      if(map.getZoom() > map.getMaxZoom()) {
        alert("You zoomed too far!");
      }
    });
1

You could add your own custom Handler (see also https://leafletjs.com/examples/extending/extending-3-controls.html):

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    osmAttrib = '© OpenStreetMap contributors',
    osm = L.tileLayer(osmUrl, {
      maxZoom: 18,
      attribution: osmAttrib
    });

L.CustomHandler = L.Handler.extend({
    addHooks: function() {
        L.DomEvent.on(this._map._container, 'mousewheel', this._doSomething, this);
    },

    removeHooks: function() {
        L.DomEvent.off(this._map._container, 'mousewheel', this._doSomething, this);
    },

    _doSomething: function(event) { 
      if(this._map.getZoom() === this._map.getMaxZoom() && event.deltaY < 0 ||
        this._map.getZoom() === this._map.getMinZoom() && event.deltaY > 0) {
        console.log("Tried to zoom, but can't handle it anymore!")
      } else {
        console.log("Zoom worked fine!")
      }
    }
});
L.Map.addInitHook('addHandler', 'myScrollWheelZoom', L.CustomHandler);

var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);
// You could also disable this.
map.scrollWheelZoom.enable();
map.myScrollWheelZoom.enable();

In case you disable the default scrollWheelZoom, you could implement your own, borrowing from https://github.com/Leaflet/Leaflet/blob/master/src/map/handler/Map.ScrollWheelZoom.js#L31.

  • Thanks a lot, it worked! I would like to have this feature on any failed zoom attempt, whether triggered by mousewheel or something else. So far, I have managed to get it to work on several events associated with zoom: 'mousewheel', 'keydown' (combined with event.keycode), 'dblclick', 'boxzoomend' and 'click' on the controls (a.leaflet-control-zoom-in and a.leaflet-control-zoom-out). I found an approach for pinch zoom ('gestureend' combined with event.scale) as well, even though I couldn't test it yet. Is there anything I have missed or can I detect all zoom events with these? – Moehrengulasch Mar 14 at 23:36
  • In github.com/Leaflet/Leaflet/tree/master/src/map/handler I see boxzoom (boxzoomend), double click zoom (dblclick), scroll wheel zoom (mousewheel/wheel), touchzoom (guess that would be gestureend, though they use touchend there), and keyboard (keydown). So your list seems quite complete. If you want to be completely sure you could also consider overwriting setView in Map.js (github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L178), but then upgrading Leaflet becomes annoying. – Dom Mar 15 at 9:10
1

If you are interested only on mouse wheel zoom, it could be done like this:

L.DomEvent.on(document.getElementById('map'), 'wheel', function (ev) {
  var currZoom = map.getZoom();
  if (ev.deltaY > 0) {
    if (map.getMinZoom() == currZoom) {
      alert('You tried to zoom out too far!');
    }
    }
  else if (map.getMaxZoom() == currZoom) {
    alert('You tried to zoom in too far!');
  }
});
  • Thank you, simple and working well! I need to have this for other zoom events as well but that seems to be easily possible. – Moehrengulasch Mar 14 at 23:44
  • You could then mark answer as accepted. – TomazicM Mar 15 at 6:40
  • I'm going to mark it as answered when I'm sure about the other zoom events. I have compiled a list in my other comment - is this complete? – Moehrengulasch Mar 15 at 7:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.