Popup gpx data Openlayers

Question

Popup gpx data Openlayers

Navigation

#1 by (0 votes)

0

I am creating a map with Openlayers 5.3 (it works with versions 3 and 4 as well) that has several layers selected with Layerswitcher and a vector layer of GPX file with information that I want to show by means of a popup, when clicking on waypoints or in markers that I add to the map.

By means of a mixture of code of the examples of Openlayers, GPX Data and Icon Symbolizer and with the works of ol.popup Matt Walker I have achieved a popup that I like but it does not quite work well at all.

I click on the waypoint or in the marker that contains data and the popup with the information is shown correctly, I give in the closing and the popup disappears, but if the popup spike is open in any part of the map the popup keeps seeing but empty, no longer information, when clicking on other parts of the map should close or simply do nothing.

I use the CSS and JS libraries (openlayers v5.3.0 and [email protected]), I load the map and the GPX layer with its attributes and styles, I load a marker (Flag start route) and finally I incorporate the orders of POPUP. The complete example can be seen in JSFiddle.

This is the popup code:

var popup = new Popup();
map.addOverlay(popup);

map.on('singleclick', function(evt) {
var info = document.getElementById('info');
var target = document.getElementById('map');
function displayFeatureInfo(pixel) {
        info.style.left = pixel[0] + 'px';
        info.style.top = (pixel[1] - 1) + 'px';
        var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
            return feature;
        });
        if (feature) {
            var text = feature.get('desc');
            info.style.display = 'none';
            info.innerHTML = text;
            info.style.display = 'block';
            target.style.cursor = "";
        } else {
            info.style.display = 'none';
            map.getTarget().style.cursor = "";
        }
    }

        if (evt.dragging) {
            info.style.display = 'none';
            return;
        }

        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(pixel);

        popup.show(evt.coordinate, info);
    });

The examples:

link link link link

popup openlayers-3

asked by Nanoflojo 12.12.2018 в 17:17

source

1 answer

org.openqa.selenium.StaleElementReferenceException: stale element reference: element is not attached to the page document movement of the rigibody2d

score 0 · Answer 1

Rewriting the singleclick event management in the following way:

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

    var info = document.getElementById('info');
  info.style.display = 'none';

    var target = document.getElementById('map');
  var pixel = map.getEventPixel(evt.originalEvent);
  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    return feature;
  });

  if (feature) {
    var text = feature.get('desc');
    info.innerHTML = text;
    info.style.display = 'block';
      popup.show(evt.coordinate, info);
  } else {
    popup.hide();
  }
});

I think you get what you want. I think that by comparing your code with this one you will see the differences and there is no need to explain much more. Simply in your code when a feature where the user has clicked is not located does not close the popup. One more thing, we would have to add in the style section the value none for the display property to the info element. This way, when loading the page for the first time, the element without content is not shown at the end of the map.