Disable pan and zoom in OpenLayers

Question

I'm using the latest version of OpenLayers in my map application, and I need disable all zoom functions and panning for users. Zoom, mouse zoom, double click zoom, and control buttons zoom need to be disabled.

How can I do that? I've made some searches but I've just found how to disable everything, and I need other interactions like single click on a feature.

Answer 1

In OpenLayers 5 using ES modules:

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import {defaults as defaultInteractions} from 'ol/interaction.js';`

new Map({
  target:'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
  view: new View({
    center: [0,0],
    zoom: 2
  }),
  interactions: defaultInteractions({
    doubleClickZoom: false,
    dragAndDrop: false,
    dragPan: false,
    keyboardPan: false,
    keyboardZoom: false,
    mouseWheelZoom: false,
    pointer: false,
    select: false
  }),
})

Answer 2

      var map = new ol.Map({
    interactions: ol.interaction.defaults({
      doubleClickZoom: false,
      dragAndDrop: false,
      dragPan: false,
      keyboardPan: false,
      keyboardZoom: false,
      mouseWheelZoom: false,
      pointer: false,
      select: false
    }),
    controls: ol.control.defaults({
      attribution: false,
      zoom: false,
    }),
    layers: [
      new ol.layer.Tile({
        source: new ol.source.TileImage({
          url: 'http://mt1.google.com/vt/lyrs=m@113&hl=en&&x={x}&y={y}&z={z}'
        })
      })
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });

  map.on('singleclick', function(evt) {
  alert("clicked");
  });

jsfiddle for test

Answer 3

There is a simple way if you want to disable all interactions at once:

import Map from 'ol/Map'
import Collection from 'ol/Collection'

new Map({
  ...,
  interactions: new Collection()
})