menu

Questions & Answers

Prevent interactions on OpenLayers map while animation is on action

I'm working on a web application that uses OpenLayers map. On this component, I get the properties from its parent, which are used to draw some icons on specified coordinates on the map, and since this takes a bit of a time, to cover that time, I'm using this animation:

map.getView().animate({ center: transform(latitude, longitude], 'EPSG:4326', 'EPSG:3857'), duration: 1000 })

I'm trying to find a solution to prevent any type of mouse interaction on the map, while this animation is in action (not finished).

Answers(1) :

To deactivate the interactions call a function like disableInteraction():

const disableInteraction = () => {
  map.getInteractions().forEach(i => {
    i.setActive(false)
  })
}

You can call enableInteractions() when the animation stops (or whenever you need), to reactivate the interactions:

const enableInteractions = () => {
  map.getInteractions().forEach(i => {
    i.setActive(true)
  })
}