OpenLayers disable mouse wheel on zoom

Author: Stoimen

20 Jun

What is OpenLayers?

OpenLayers is a open source JavaScript library, which helps for the usage and development of web based map applications. Usually when you use something like http://openstreetmap.org you’ve a tile server, which contains, or dynamically, renders tiles on a specific coordinates and zoom level. Such application in basic are most of the map servers you may know, as Google, Yahoo and Live (now Bing). Than you need a layer above that, that must generate the correct HTTP queries to the server and after receiving the tiles to position them correctly. Of course a open library like OpenLayers do much more. In fact this is complex JavaScript application that gives enough flexability to manipulate rich map applications.

How to disable the zoom with the mouse wheel

Very common problem (if we can say so) in map sites is the scroll, cause sometimes the user wants to scroll the page, and sometimes to scroll the map, which action results in zooming the map. Yes, there are so many solutions as many are the combinations of those scenarios. But the case here was how to disable the mouse wheel on OpenLayers.

Why it’s not working

Described in the documentation as a simple task, it appears to be not so much! Following the official instructions, you must add those lines of code:

var movemap = new OpenLayers.Control.Navigation({
> 'zoomWheelEnabled': false});

movemap.disableZoomWheel();

… but that’s not working.

How to make it really work

Actually something’s blocking the effect of disableZoomWheel in the chain of the Control class, so the solution is as simple as it’s:

controls = map.getControlsByClass('
     >OpenLayers.Control.Navigation');

for(var I = 0; i<controls.length; ++i)
     controls.disableZoomWheel();

Filed under: javascript, micro tutorial, web development

6 Responses for "OpenLayers disable mouse wheel on zoom"

Frédéric July 6th, 2009 at 6:13 pm 1
Are you sure that is correct?

I put your code in my map, and the zoom wheel is always enabled!

look: http://www.trouvetongull.info/carte/

what is wrong?

bye,
fred
Stoimen July 6th, 2009 at 10:17 pm 2
Yes I’m sure it’s working and I see it working on your site! I don’t understand where the problem is!? If you have any doubt, please provide some source code and I’ll be glad to help!

Greetings
Lars Knickrehm July 17th, 2009 at 8:15 pm 3
You should use the following code to disable the mouse’s scoll wheel:

var movemap = new OpenLayers.Control.Navigation({zoomWheelEnabled : false});

zoomWheelEnabled is not a JS sztring and it works like a charm …
Stoimen July 21st, 2009 at 10:29 am 4
Strange enough but it doesn’t work for me! I tried with that code before and it wasn’t working again. After applying the code I mention in the code everything was just fine.

greetings
shaun May 1st, 2010 at 8:08 am 5
I needed to disable all controls for an OpenLayers google map without much success, but the way to do it seems to be creating the map with an empty control array like so:

map = new OpenLayers.Map(“divMap”, { controls: [] })

You could then add any specific controls required.
ch May 6th, 2010 at 6:35 pm 6
I had to add the code for removing the zoomWheel at the end, after adding all other controls to the map. It seems that other controls are adding NavigationControl too.

var navCtrls = map.getControlsByClass(‘OpenLayers.Control.Navigation’);
for (var i = 0; i < navCtrls.length; i++) {
navCtrls[i].disableZoomWheel();
}