I want to change the mouse cursor to a pointer when the mouse is hovering over a feature. I currently have the following:

this.map.on('pointermove', evt => {
  if (!evt.dragging) {
    this.map.getTargetElement().style.cursor = this.map.hasFeatureAtPixel(this.map.getEventPixel(evt.originalEvent)) ? 'pointer' : '';

It works, but I am wondering if there is a more efficient way of doing this such as having the browser take care of it via CSS.

  • What are the CSS classes of the features? (Try to inspect the elements in the browser.) – Stefan Feb 1 at 17:15
  • It looks like openlayers is using one canvas element to draw the map and most features within it (except for overlays.) This rules out a CSS solution, I believe – Cengiz Feb 1 at 19:40
  • OL is drawing on the canvas, so the features are known to OL only, not the DOM. So, you need to go with OL methods such as forEachFeatureAtPixel etc. These methods are optimized, so don't worry about performance issues. – Ulas Feb 2 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.