Can I drag the map with ctrl in Openlayers3?

Question

Exist a way to drag the map when I hold down the Ctrl (control) key?

Normally to drag the map is necessary just hold the left mouse button and move on the map, but I need to drag the map without hold the left mouse button but with the ctrl button. Is possibile?

Better use arrows keys otherwise how do you control the panning? — Jonatas Walker, Oct 01 '16 at 10:27
i want control the panning with the mause. I want only drag the map while I hold Ctrl and not the left mouse button — TooFast, Oct 01 '16 at 16:07

west efan · Accepted Answer · 2016-10-04T13:35:12.980

There is indeed a way to only allow panning while holding ctrl-key. A fully working example can be found in this fiddle: https://jsfiddle.net/mnpq3ufe/

For it to work, you have to disable the existing dragPan interaction in your map init to override/re-add it later on:

interactions: ol.interaction.defaults({
    dragPan: false
})

After that you can create your new customised interaction, which just triggers while ctrl key is pressed, for this we use condition, for more information about conditions and its possibilities you can head over to the OpenLayers APIdocs:

map.addInteraction(new ol.interaction.DragPan({
  condition: function(event) {
    return event.originalEvent.ctrlKey
  }
}));

EDIT:

This is just a proof of concept yet and is not fully working, since it snaps into the wrong place when initially starting the drag. Unfortunately I have no time currently to figure everything out right now, but it could probably still help you to get started. Here is the fiddle: https://jsfiddle.net/mnpq3ufe/5/ Basically I am using the pointermove event to recenter the map each time the cursor is moved while holding the ctrl-key:

map.on('pointermove', function(event){
    if(event.originalEvent.ctrlKey){
    var pixelCenter = [map.coordinateToPixelTransform_[4], 
        map.coordinateToPixelTransform_[5]];
    var movedPixels = [pixelCenter[0]-event.pixel[0],
        pixelCenter[1]-event.pixel[1]];
    map.getView().setCenter(map.getCoordinateFromPixel(movedPixels));
  }
});

Thanks for the reply. But this works when i press both Ctrl and the left button of the mouse. I need that it works only when I press Ctrl and no the left button of the mouse. — TooFast, Oct 02 '16 at 01:44
I am really sorry for the misunderstanding in the beginning, maybe the new proof of concept I added to my answer can help you out. — west efan, Oct 04 '16 at 13:35

Can I drag the map with ctrl in Openlayers3?

1 Answers1

Linked