How do I disable mouse scroll zoom in OpenLayers 3?
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);
},
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);