0

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/

1 respuesta 1

0

Reescribiendo la gestión del evento singleclick de la siguiente forma:

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

creo que consigues lo que pretendes. Creo que comparando tu código con este verás las diferencias y no hace falta explicar mucho más. Simplemente en tu código cuando no se localiza una feature donde el usuario ha hecho clic no cierras el popup. Una cosa más, habría que añadir en la sección de estilos el valor none para la propiedad display al elemento info. De este modo al cargar la página por primera vez no se muestra al final del mapa dicho elemento sin contenido.

1
  • Muchas gracias, lo habia resuelto ya incluyendo overlay.setPosition(undefined); en "else", pero no se si era totalmente correcto, así está mucho mas claro, lo otro era un batiburrillo.
    – Nanoflojo
    el 17 dic. 2018 a las 8:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.