0

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?

0

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

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.