OpenLayers disable mouse wheel on zoom

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();

Related posts:

  1. OpenLayers disable dragging
  2. JavaScript disable mouse wheel
  3. OpenLayers Can Be Faster!
This entry was posted in javascript, micro tutorial, web development and tagged , , , . Bookmark the permalink.

7 Responses to OpenLayers disable mouse wheel on zoom

  1. Frédéric says:

    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

  2. Stoimen says:

    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

  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 ;)

  4. Stoimen says:

    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

  5. shaun says:

    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.

  6. ch says:

    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();
    }

  7. Shri says:

    Just to be clear to other users, who might not be programmers, let me add this:

    Look at this line:

      controls.disableZoomWheel();

    It should be:

      controls[i].disableZoomWheel();

    PS: Also make sure your variable are all the same case. ( for var i=0, …)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">