CODEWITHSUNDEEP
zoomingopenlayersmousewheel
GeoffreyB
GeoffreyB

Reputation: 1839

Disable zoom with Openlayers

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.

Upvotes: 10

Views: 16402

Answers (6)

Noémie Kerroux
Noémie Kerroux

Reputation: 350

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 ! :)

Upvotes: 0

ThomasK
ThomasK

Reputation: 119

For OpenLayers3 the interaction array also needs to be empty.

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

Upvotes: 11

Thomas Urban
Thomas Urban

Reputation: 5071

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.

Upvotes: 7

Shaunak
Shaunak

Reputation: 18056

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

Upvotes: 2

Mahdi
Mahdi

Reputation: 9427

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.

Upvotes: 3

tonio
tonio

Reputation: 2376

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

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

Upvotes: 17

Related Questions