Skip to content Skip to sidebar Skip to footer

Can I Drag The Map With Ctrl In Openlayers3?

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 t

Solution 1:

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) {
    returnevent.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));
  }
});

Post a Comment for "Can I Drag The Map With Ctrl In Openlayers3?"