8

I'm trying to override it 'cause it's so dang sensitive. Bonus points if you can also demonstrate a elegant way to override, but, well, I can probably figure that out.

18

Simplest way I've found is to set the interaction defaults to false when you instantiate your map like so:

var map = new ol.Map({
  interactions: ol.interaction.defaults({mouseWheelZoom:false}),
  ...
});

Then once it is disabled you will need to provide your own functions to zoom on mouse scroll. Something like this should do the trick:

    map.on('mousewheel', function(e){
        e.browserEvent.preventDefault();
        var now = new Date();
        if(lastScrollZoom === null || now > lastScrollZoom ) {
            var zoom_in = e.browserEvent.deltaY < 0;
            _panAndZoom(e.map, zoom_in, e.coordinate);
            lastScrollZoom = now.setMilliseconds(now.getMilliseconds() + scrollDelta)
        }
    });

This is what I use to prevent the scroll wheel from zooming all the way in or out too rapidly. However it relies on you creating a function _panAndZoom(map,zoom_in, coordinates) and setting the lastScrollZoom and scrollDelta settings in your app.

This is my _panAndZoom function:

_panAndZoom: function(map, zoom_in, coordinates){
    var view = map.getView();
    var currentResolution = view.getResolution();
    var delta = zoom_in ? 1 : -1;
    var pan = ol.animation.pan({
         duration: 500,
        source: view.getCenter(),
        easing: ol.easing.easeOut
    });
    var zoom = ol.animation.zoom({
        resolution: currentResolution,
        duration: 500,
        easing: ol.easing.easeOut
    });
    map.beforeRender(pan,zoom);
    var newResolution = view.constrainResolution(currentResolution, delta);
    view.setResolution(newResolution);
    view.setCenter(coordinates);
},
1
  • 2
    Nice bonus. I can't actually give you bonus points, though. I lied. – Alien Life Form Feb 25 '15 at 19:37
2

In case you want to disable the scroll zoom for an already existing map, there is now a setActive method in Open Layers 3:

map.getInteractions().forEach(function(interaction) {
  if (interaction instanceof ol.interaction.MouseWheelZoom) {
    interaction.setActive(false);
  }
}, this);

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.