Estoy creando un mapa con Openlayers 5.3 (me funciona con las versiones 3 y 4 también) que tiene varias capas seleccionadas con Layerswitcher y una capa vectorial de archivo GPX con información que quiero mostrar mediante un popup, al pinchar en los waypoints o en marcadores que añado al mapa.
Mediante una mezcla de código de los ejemplos de Openlayers, GPX Data e Icon Symbolizer y con los trabajos de ol.popup Matt Walker he conseguido un popup que me gusta pero no acaba de funcionar del todo bien.
Pincho en el waypoint o en el marcador que contienen data y se muestra correctamente el popup con la información, doy en el cierre y el popup desaparece, pero si estando abierto el popup pincho en cualquier parte del mapa el popup sigue viéndose pero vacío, ya sin información, cuando al pinchar en otras partes del mapa debería cerrarse o simplemente no hacer nada.
Utilizo las librerias CSS y JS (openlayers v5.3.0 y [email protected]), cargo el mapa y la capa GPX con sus atributos y estilos, cargo un marcador (Bandera inicio ruta) y finalmente incorporo las ordenes del POPUP. El ejemplo completo se puede ver en JSFiddle.
Este es el código del popup:
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);
});
Los ejemplos:
https://openlayers.org/en/latest/examples/gpx.html?q=gpx%20data/ https://openlayers.org/en/latest/examples/icon.html/ https://github.com/walkermatt/ol-popup/ https://jsfiddle.net/nanoflojo/zd5y4aw3/