Disable zoom with Openlayers

Question

i'm using OpenLayers to display custom OSM maps on my website.

I've some points to respect: the map have to be fix (meaning that we can't drag it or zoom it).

I have a problem with the zoom, i can't manage to disable zoom with the mouse. Does anyone has a tip?

map = new OpenLayers.Map('map');
map.events.remove("move");
map.events.remove("movestart");
map.events.remove("moveend");
map.events.remove("zoomend");
map.events.remove("mouseover");
map.events.remove("mouseout");
map.events.remove("mousemove");
map.events.remove("zoomstart");
var nav = new OpenLayers.Control.Navigation({
  defaultDblClick: function(event) { return ; }
});
map[index].addControl(nav);

Also, if someone has a tip to remove all Navigation events easier than that, it would be greatly appreciated.

Answer 1

Disable the default controls on your map by passing an empty array:

var map = new OpenLayers.Map('map', { controls: [] });

Answer 2

For OpenLayers3 the interaction array also needs to be empty.

var map = new ol.Map({
  controls: [],
  interactions: []
});

Answer 3

Simplifying approach of Mahdi results in

var i, l, c = map.getControlsBy( "zoomWheelEnabled", true );
for ( i = 0, l = c.length; i < l; i++ ) {
    c[i].disableZoomWheel();
}

This way disabling zoom on mouse wheel doesn't require to customize options on constructing map e.g. by creating map without any control (though this was somewhat requested by Lght). In addition re-enabling zoom works equivalently.

In addition, by searching controls matching enabled property zoomWheelEnabled rather than class name it's supporting custom controls derived from OpenLayers.Control.Navigation.

Answer 4

You can do the following also:

map = new OpenLayers.Map({
    // options here ...
}

var Navigation = new OpenLayers.Control.Navigation({
    'zoomWheelEnabled': false,
    'defaultDblClick': function ( event ) { 
        return; 
     }
});

map.addControl(Navigation);

var NavigationControls = map.getControlsByClass('OpenLayers.Control.Navigation')
  , i;

for ( i = 0; i < NavigationControls.length; i++ ) {
    NavigationControls[i].disableZoomWheel();
}

Found here.

For other options like disable dragging, you can take a look at the documentation and customize the above code.

Answer 5

Here is another easy way to restrict the zoom event based on some logic. Because OpenLayers doesnt provide a 'beforezoom'

map.zoomToProxy = map.zoomTo;
map.zoomTo =  function (zoom,xy){
// if you want zoom to go through call
map.zoomToProxy(zoom,xy); 
//else do nothing and map wont zoom
};

How this works:

For any kind of zooming activity, OpenLayers API ultimately calls the function called zoomTo. So before overriding it, we copy that function to a new function called 'zoomToProxy'. The we override it and add our conditional zoom logic. If we want the zoom to happen we just call new proxy function :)

Answer 6

You could reset the controls array and then add the Zoom and TouchNavigation to it.

var map_controls = [];
map_controls.push( new OpenLayers.Control.Zoom() );
map_controls.push( new OpenLayers.Control.TouchNavigation() );
var map = new OpenLayers.Map({
  div: "map",
  controls: map_controls
});

Hope it helps ! :)