How to disable DragPan in OpenLayers 3?

Question

How to disable DragPan interaction in Openlayers 3 (when map is already defined)?

Also, why I'm unable to use mousemove event?
I'm doing this: map.on('mousemove',function(e){ ...}); and it doesn't work.

Chisholm

Answer 1

To disable an interaction, you need to remove it from the map. If you don't have a reference to your interaction, you can find it using the getInteractions map method:

var dragPan;
map.getInteractions().forEach(function(interaction) {
  if (interaction instanceof ol.interaction.DragPan) {
    dragPan = interaction;
  }
}, this);
if (dragPan) {
  map.removeInteraction(dragPan);
}

For the mouse move event, the correct event to use is 'pointermove', see an example of use here: http://openlayers.org/en/v3.3.0/examples/icon.html

Know that you can configure the interactions you want created and added by default to your map. If, for example, you wanted to create a map without the dragPan interaction, you could do so like this:

var map = new ol.Map({
  layers: layers,
  interactions: ol.interaction.defaults({
    dragPan: false
  }),
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

See here for a list of all possible options of ol.interaction.defaults.

Snoddy

Answer 2

There is now a setActive method in Open Layers 3:

map.getInteractions().forEach(function(interaction) {
  if (interaction instanceof ol.interaction.DragPan) {
    interaction.setActive(false);
  }
}, this);

Cuculiform

Answer 3

Latest Version of OpenLayers v5.3.1

If you want to activate or deactivate MouseWheelZoom, DoubleClickZoom, DragPan

Add references first

import { defaults as defaultInteractions, MouseWheelZoom,
DoubleClickZoom, DragPan } from 'ol/interaction';

Create your map and add interactions MouseWheelZoom, DoubleClickZoom, DragPan in your map.

this._map = new Map({
      interactions: defaultInteractions({
        mouseWheelZoom: true,
        doubleClickZoom: true,
        dragPan: true,
      }).extend([]),
      layers: this.getBaseLayersFromConfig(this.baseLayers),
      controls: defaultControls({ rotate: false })
    });

    this._map.setTarget(this.host.nativeElement.firstElementChild);
    this._map.on('moveend', this.onMoveEnd.bind(this));
    this._map.on('click', this.onClick.bind(this));
    // debounce pointermove event so as to not flood other components
    this.pointerMoveSubscription$ = fromEvent(this._map, 'pointermove')
      .pipe(debounceTime(200))
      .subscribe((res) => {
        this.onMove(res);
        // console.log('######pointer move ');
      });
    this._map.on('dblclick', this.onDoubleClick.bind(this));
    this.initialised.emit();

and use instanceof like this to deactivate. You can place these codes in some events.

this._map.getInteractions().forEach(e => {
       if((e instanceof MouseWheelZoom) || (e instanceof DoubleClickZoom) || (e instanceof DragPan))
       {
                 e.setActive(false);
       }
      });

replace false with true to activate.

Shel