Is there a way to disable rotation in OpenLayers 3?

Franziskus Karsunke picture Franziskus Karsunke · Sep 4, 2014 · Viewed 8.6k times · Source

I am currently upgrading my OpenLayers 2 Mapview to OpenLayers 3. I really like the new OpenLayers client, but i wanted to deactivate the ability to rotate the map on mobile devices (rotating with 2 fingers).

But I can't find any settings for this. Is this not possible or am I only to dumb to find the setting?

I am using the current release version (3.0.0) of the openlayers javascript client. (https://github.com/openlayers/ol3/releases/tag/v3.0.0)

Answer

Simon Zyx picture Simon Zyx · Sep 5, 2014

Yes there is a way to deactivate the ability to rotate the map.

You need to customize the interactions of the ol.Map object. Either you use the ol.interaction.defaults function to create an ol.Collection with interactions or you create an array with only the interactions you want. Then you can pass it to the constructor of ol.Map.

Using the ol.interaction.defaults function (http://openlayers.org/en/master/apidoc/ol.interaction.html#defaults):

var interactions = ol.interaction.defaults({altShiftDragRotate:false, pinchRotate:false}); 
var map = new ol.Map {
    interactions: interactions
};

The first line creates all default interactions but the ability to rotate via keyboard+mouse and using fingers on a mobile device.

You maybe want to remove the ol.control.Rotate then, too. (This is the needle in the upper right which is used to reset the rotation and only appears if the map is rotated). Works the same way.

Creating controls without compass via ol.control.defaults (http://openlayers.org/en/master/apidoc/ol.control.html#defaults)

var controls = ol.control.defaults({rotate: false});

'Full' code:

var controls = ol.control.defaults({rotate: false}); 
var interactions = ol.interaction.defaults({altShiftDragRotate:false, pinchRotate:false});

var map = new ol.Map {
    controls: controls,
    interactions: interactions
};