18

I'm working with the Leaflet JavaScript Library and attached a (working) map to my HTML Document. It is in the middle of the page, and when I'm scrolling down with my mouse wheel and arrive at the map, it automatically zooms into the map.

I want to scroll through the page without stopping at the map. Is there a way to activate the wheel zoom only after the first click on the map?

25

It's simple: create L.Map with scrollWheelZoom: false option, then add a listener:

map.once('focus', function() { map.scrollWheelZoom.enable(); });

If you need to toggle zooming:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });
  • Thanks :) I started a comment for this but got too big so put in answer below. – danwild Sep 15 '16 at 1:05
12

More of a comment/improvement on the toggle component of the accepted answer, which is great (thanks). But.

When interacting with a map, for many use cases the user also needs to click the map to perform their task, so this:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

May result in some unexpected behaviour once the user starts actually using the map.

I would suggest something that may seem a bit more intuitive the user - click off the map to disable mouse scrolling.

For example set your scrollWheelZoom: false as above, then:

map.on('focus', function() { map.scrollWheelZoom.enable(); });
map.on('blur', function() { map.scrollWheelZoom.disable(); });
  • 1
    Using focus/blur definitely makes the map functionality much more intuitive. – doublesharp Jan 25 '17 at 19:15
  • Agreed. The focus/blur approach is great. Thanks! – sstringer Aug 12 '18 at 12:57
  • Great, but needs a means to disable scroll if the map is full-screen and the user scrolls in-and-out in rapid succession (making several directional changes within one second). This confused up-and-down scrolling occurs when they are stuck and cannot leave the full-browser map to access content above or below it. – Loren Feb 28 at 17:45
6

Leaflet.Sleep will make your job easy, and it's plenty configurable

Basically, it turns off scroll events when they're not needed and "wakes" your map when they are.

I'd post code, but the defaults seem to get it right, so you likely won't need anything beyond <script src="path/to/leaflet-sleep.js"></script> and you'll have a map like this.

0

You can do that by only those 3 lines:

map.scrollWheelZoom.disable();
map.on('focus', () => { map.scrollWheelZoom.enable(); });
map.on('blur', () => { map.scrollWheelZoom.disable(); });

or:

map.scrollWheelZoom.disable();
this.map.on('click', () => { this.map.scrollWheelZoom.enable();});
this.map.on('mouseout', () => { this.map.scrollWheelZoom.disable();});

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.