OpenLayers 3 creando ventanas emergentes con un clic

8

Tengo un mapa OSM en el que visualizo un archivo GeoJSON (punto). Me gustaría crear una ventana emergente al hacer clic para que cada punto muestre atributos.

No puedo encontrar una especie de tutorial paso a paso muy básico para hacerlo, incluso en los ejemplos de OpenLayers 3.

¿Alguien tiene algunos enlaces útiles?

popup openlayers Leehan
fuente

Respuestas:

9

Aquí hay un tutorial que me pareció útil. El tutorial utiliza ol3-popup de walkermatt para crear las ventanas emergentes. He cortado y pegado algo de código de la demostración para que tengas una idea de cómo debería ser.

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});

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

map.on('click', function(evt) {
    var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
    popup.show(evt.coordinate, '<div><h2>Coordinates</h2><p>' + prettyCoord + '</p></div>');
});
Ravi Mehta
fuente