OpenLayer4 click AND hover popup

Question

I added the popup (click) on the data layer, now how can I add the hover popup without broke the click popup?

The hover popup it will be just a few thing, not the whole text I display with the click popup, it will be like a preview.

Here my JS code:

    function info() {

      map.on('click', function(evt) {
        var content = document.getElementById('popup-content');
        content.innerHTML = '';
        var viewResolution = map.getView().getResolution();
        var coordinate = evt.coordinate;
        url = pmfeatlayer.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, projection, {'INFO_FORMAT': 'text/html'});

        if (url) {
          var xhttp = new XMLHttpRequest();
          xhttp.open("GET", url, true);
          xhttp.send();
          xhttp.onreadystatechange = function (aEvt) {
            if (xhttp.readyState == 4) {
              if (xhttp.status == 200)  {

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

                if (window.innerWidth < 768) {
                  // show hide modal on mobile and if consult or not
                  if(res.getElementsByTagName('item').length != 0){
                    if (window.location.href.indexOf("consult") != -1) {
                      fullInfoPc(xhttp.responseText);
                    } else {
                      fullInfo(xhttp.responseText);
                    }
                  } else {
                    $("#mobpopup").modal('hide');
                  }

                } else if (window.innerWidth >= 768) {
                  // set the position of the popup on the screen (from tablet) and if consult or not
                  if(res.getElementsByTagName('item').length != 0){
                    overlay.setPosition(coordinate);
                  } else {
                    overlay.setPosition(undefined);
                  }

                  // create the content of the popup
                  if (window.location.href.indexOf("consult") != -1) {
                    fullInfoPc(xhttp.responseText);
                  } else {
                    fullInfo(xhttp.responseText);
                  }

                } // end else if
              } // end if 200
            } // end if 4
          }; // end onreadystatechange

        } // end if(url)
      }); // end map.on(click)

      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        var hit = map.forEachLayerAtPixel(pixel, function() { return true; }, null, function(layer) { return layer === pmfeatlayer; });
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
      });

I'm trying to use this example but I can't make it works, someone know how to do it?

Answer 1

This is my solution:

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

    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", url, true);
    xhttp.send();
    xhttp.onreadystatechange = function (aEvt) {
      if (xhttp.readyState == 4) {
        if (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='infotitle hoverPopup'><p>" + getFieldValue(myitems, 0, 'order_type') + "</p></div>").delay( 1000 ).fadeIn( 400 );;
          } else {
            info.html("");
          }

        } // end if 200
      } // end if 4
    }; // end onreadystatechange

  } // end if (feature && url)
}); // end pointermove