Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to disable rotation in OpenLayers 3?

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)

like image 573
Franziskus Karsunke Avatar asked Sep 04 '14 15:09

Franziskus Karsunke


2 Answers

In the current version of OpenLayers 3 you can simply disable the enableRotation flag of the view object:

view: new ol.View({
    ...
    enableRotation: false
})
like image 31
Jose Gómez Avatar answered Nov 02 '22 17:11

Jose Gómez


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
};
like image 125
Simon Zyx Avatar answered Nov 02 '22 15:11

Simon Zyx