OpenLayers – GetFeatureInfo on Mouse Hover

getfeatureinfomouse positionmouse-cursoropenlayerspopup

I am able to get popup onclick on the feature but want to get popup also on mouse hover on the feature (polygon,point). Can anyone help me out.
For onclick I used below code –

var feature_onClick;
map.on('click', function(evt) {

    feature_onClick = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        console.log(feature);
        return feature;
      });


  if (feature_onClick) {
    var content = document.getElementById('popup-content');
    console.log(feature_onClick.getProperties().name);
    overlay.setPosition(evt.coordinate);
     content.innerHTML = feature_onClick.getProperties().name;
     container.style.display = 'block';
     }
});

For mouse hover I am using below code but unable to get pop up. Only cursor changes to pointer.

map.on('pointermove', function(e) {
  if (e.dragging) {
    $(element).popover('destroy');
    return;
  }
  var pixel = map.getEventPixel(e.originalEvent);
  var hit = map.hasFeatureAtPixel(pixel);
  map.getTarget().style.cursor = hit ? 'pointer' : '';
});

Best Answer

You could simply reuse your click code and change it pointermove/hover, although I presume you only want the popup visible when over a feature, so there's an else clause to hide it.

var feature_onClick;
map.on('click', function(evt) {

    feature_onClick = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
        console.log(feature);
        return feature;
      });


  if (feature_onClick) {
    var content = document.getElementById('popup-content');
    console.log(feature_onClick.getProperties().name);
    overlay.setPosition(evt.coordinate);
     content.innerHTML = 'CLICK ' + feature_onClick.getProperties().name;
     container.style.display = 'block';
     }
});

    var feature_onHover;
    map.on('pointermove', function(evt) {

        feature_onHover = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
            console.log(feature);
            return feature;
          });

      if (feature_onHover) {
        var content = document.getElementById('popup-content');
        console.log(feature_onHover.getProperties().name);
        overlay.setPosition(evt.coordinate);
         content.innerHTML = 'HOVER ' + feature_onHover.getProperties().name;
         container.style.display = 'block';
      } else {
         container.style.display = 'none';
      }
    });
Related Question