CODEWITHSUNDEEP
javascriptopenlayers-3
Adam
Adam

Reputation: 36703

Drag rotate interaction in OpenLayers 3 on Linux

I'd like to use the OpenLayers 3 rotation interaction on a browser running under Linux. This allows the map to be rotate by dragging whilst pressing Alt and Ctrl. This works fine on Windows, however not in Redhat 6u2 and likely other distributions as the Alt key is reserved for X-Windows drag Window behaviour.

Firstly I customized the DragRotate with ol.events.condition.shiftKeyOnly, which worked, but conflicted with the zoom-box functionality, i.e. draws a blue zoom box whilst rotating. 

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    target: 'map',
    view: new ol.View({
        center: [-25860000, 4130000],
        zoom: 10
    }),
    interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
        condition: ol.events.condition.shiftKeyOnly
    })])
});

I'd like to retain the shift-drag for the zoom box and use some other key/combination, maybe 'R+Shift'? I've tried to customize the condition. See my JSFiddle

var customCondition = function(mapBrowserEvent) {
   return false; // TODO
};

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    target: 'map',
    view: new ol.View({
        center: [-25860000, 4130000],
        zoom: 10
    }),
    interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
        condition: customCondition
    })])
});

I can't find anything in the API about implementing custom conditions other than ol.events and MapBrowserEvent documentation. Using a debugger I can't find any attributes in the structure or nested originalEvent that contains a keycode etc.

Upvotes: 3

Views: 1102

Answers (1)

Jonatas Walker
Jonatas Walker

Reputation: 14150

Here is a custom condition - Ctrl + Shift:

ol.events.condition.custom = function(mapBrowserEvent) {
    var browserEvent = mapBrowserEvent.originalEvent;
    return (browserEvent.ctrlKey && browserEvent.shiftKey);
};

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
    target: 'map',
    view: new ol.View({
        center: [-25860000, 4130000],
        zoom: 10
    }),
    interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
        condition: ol.events.condition.custom
    })])
});

Upvotes: 2

Related Questions