OpenLayers 4 hover popup delay

Question

I added a function to display a popup on hover to the feature layer but it doesn't work very well.

Here my code:

map.on('pointermove', function(evt) {
  if (evt.dragging) {
    return;
  }

  var info = $('#info');
  info.html("");
  var pixel = map.getEventPixel(evt.originalEvent);
  var feature = map.forEachLayerAtPixel(pixel, function(feature) { return true; }, null, function(layer) { return layer === pmfeatlayer; });
  var viewResolution = map.getView().getResolution();
  var coordinate = evt.coordinate;
  url = pmfeatlayer.getSource().getGetFeatureInfoUrl(coordinate, viewResolution, projection, {'INFO_FORMAT': 'text/html'});

  if (feature && url) {

    info.css({
      left: pixel[0] + 'px',
      top: pixel[1] + 'px'
    });
//    setTimeout(function() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", url, true);
    xhttp.send();
    xhttp.onreadystatechange = function (aEvt) {
      if (xhttp.readyState == 4 && xhttp.status == 200) {

          var parser = new window.DOMParser();
          var res = parser.parseFromString(xhttp.responseText, "text/xml");
          var myitems = res.getElementsByTagName('item');

          if(res.getElementsByTagName('item').length != 0){
            info.html("<div class='hoverPopup'>" + hover(xhttp.responseText) + "</div>").delay( 1000 ).fadeIn( 400 );
          } else {
            info.html("");
          }

       } // end if 4 && 200
     }; // end onreadystatechange
 //}, 1000);
   } // end if (feature && url)
 }); // end pointermove

As you can see I'm using map.on('pointermove'... But it's not the exact event, What can I use to detect that the cursor is above the feature layer and it's not moving, for example, .5 seconds?

I tried to add a delay function but still, it doesn't work properly, it made a lot of requests and the popup display buggy due to the delay and the cursor can be on other parts of the map at the time is displayed.

Answer 1

You can try a debounce or throttle function to delay the calls for the popup.

A very simple way could look like this:

var stillMoving = [];
function delayPopup() {
    stillMoving.push(true);          // add my call to array

    setTimeout(function() {
        stillMoving.shift();         // remove my call from array

        // check if more calls are pending
        // if yes stop propagation
        if ( stillMoving[ 0 ] ) {
            return;
        }
        else {
            // load the popup here
            loadPopup();
        }
    }, 500);
}

Answer 2

There is a simpler method by canceling the delayed execution whenever the mouse is moved again.

var LastTimeoutRequest;
var LastLonLat;

function DisplayInfo(){    
    console.log('executed now');
    document.getElementById("pointerposition").innerHTML = '<b>' + LastLonLat + '</b>'; 
}

map.on('pointermove', function(evt) {
    if (evt.dragging) return;

    if (typeof LastTimeoutRequest !== 'undefined') { // cancel timeout when the mouse moves
        clearTimeout(LastTimeoutRequest);
    }

    LastLonLat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
    document.getElementById("pointerposition").innerHTML = LastLonLat ;

    LastTimeoutRequest = setTimeout(DisplayInfoAtPosition, 2000);        
});

This example will display the mouse postition and turn it in bold it it does not move for 2000 ms.

Answer 3

I am doing something similar and found a way to delay based on mouse position:

    $.pixelDistance = 0.01;
    $.pastPixel = undefined;
    map.on('pointermove', function(evt) {
        if (evt.dragging) {
            return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        $.pastPixel = pixel;
        setTimeout(function(){
            console.log((pixel=== $.pastPixel));
            if(pixel===$.pastPixel)
            {
                var feature1 = map.forEachLayerAtPixel( $.pastPixel, function(feature1) { return true; }, null, function(layer) { return layer === vector; });
                console.log(feature1); // end if (feature && url)
                console.log( $.pastPixel); // end if (feature && url)
            }
        }, 1000);

    }); // end pointermove