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(); |
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
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
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 😉 …
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
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.
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();
}
Just to be clear to other users, who might not be programmers, let me add this:
Look at this line:
It should be:
PS: Also make sure your variable are all the same case. ( for var i=0, …)
The problem is likely that you have two navigation controls. When you create a map object, it automatically creates a navigation control unless you pass a controls option to the map constructor. If you plan to add controls later, pass controls:[], otherwise make your controls and pass them as an array to the map constructor.
There are two typos in your code. Once fixed it works great. Thanks!
// WRONG: controls = map.getControlsByClass('OpenLayers.Control.Navigation'); for(var I = 0; i < controls.length; ++i) controls.disableZoomWheel();RIGHT: controls = map.getControlsByClass('OpenLayers.Control.Navigation'); for(var i = 0; i < controls.length; ++i) controls[i].disableZoomWheel();Every single thing about Openlayers needs a
“How to make it really work”
section. Thanks for this!
I confirmed that Dan King’s methode is working
controls = map.getControlsByClass('OpenLayers.Control.Navigation');
for(var i = 0; i < controls.length; ++i)
controls[i].disableZoomWheel();
thy, very helpful!
Another solution is to set to false directly the var before generating the map.
var nav = new OpenLayers.Control.Navigation();
nav.zoomWheelEnabled = false;
var options = {controls: [Nav,]};
var map = new OpenLayers.Map("Map", options);
Then the mousewheel will be disabled.