Search code examples
javascriptopenlayers

Add keyboard-event to Openlayers map

I'm unable to add a custom keyboard-event to Openlayers, and can't figure out why. Might it be a bug in relation to the already existing keyboard-events included in Openlayers?

I've tried the following with no result:

this.map.getViewport().addEventListener('keydown', (e) => {
  console.log(e);
}, true)


document.getElementById('map').addEventListener('keydown', (e) => {
  console.log(e);
})

Listening to clicks on the same elements work fine:

this.map.getViewport().addEventListener('click', (e) => {
  console.log(e);
}, true)

document.getElementById('map').addEventListener('click', (e) => {
  console.log(e);
})

Any solutions to this?

Solution

  • As mentioned map needs focus. You can use the FocusMap interaction of ol-ext to focus on the map when ckick on it.

    See https://github.com/Viglino/ol-ext/blob/master/src/interaction/FocusMap.js

    This example use it to handle ctrl+c/ctrl+v on a map. https://viglino.github.io/ol-ext/examples/interaction/map.interaction.copypaste.html