0

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' : '';
}); 
1

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';
      }
    });
  • But there is one problem, i want both thing to work at a time i.e pop on mouse hover and also popup on mouseclick. But, only one thing (hover) is working with following code. I lost onclick popup. – Vishal Oct 9 '18 at 7:14
  • I think you would need two separate popup content elements, one for click and one for hover. – Mike Oct 9 '18 at 8:51
  • I tried creating two popup but didn't worked, I guess I am making mistake somewhere. I will be highly obliged if you go through my code. – Vishal Oct 9 '18 at 9:25
  • jsfiddle.net/vk02923/jxk8tz4s/5 this is the code I am using, in this i have created 2popups but not getting desired results. – Vishal Oct 9 '18 at 9:44
  • I couldn't get hover to work at all in your code as some of the second popup setup seems to be missing. But both click and hover work with just one popup, I added the words HOVER and CLICK to the displays to show what was happening. – Mike Oct 9 '18 at 10:24

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.