[GIS] openlayers-3 popup getfeatureinfo

getfeatureinfohtmljavascriptopenlayerspopup

I'm Working on a map and I want to put popups to show information about each queryable layer. This is what I've got so far, but I can't make it work.

HTML:

    <section class="visualizador" id="map">
        <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer">X</a>
        <div id="popup-content"></div>
        </div>
    </section>
    <div id='info'></div>

Ol3:

/**
 * Elements that make up the popup.
 */
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');


/**
 * Add a click handler to hide the popup.
 * @return {boolean} Don't follow the href.
 */
closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};


/**
 * Create an overlay to anchor the popup to the map.
 */
var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
}));

/**
* Layers of the map
*/

var wmsSource = new ol.source.ImageWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': 'ne:ne'},
  serverType: 'geoserver'
});



//Base layers

var IGAC = new ol.layer.Tile({
                type:'base',
                title:'IGAC',
                source: new ol.source.TileWMS({
                    url: 'http://geocarto.igac.gov.co/geoservicios/cien_mil/wms',
                    params: {LAYERS: 'Todas', FORMAT:'image/png'},
                    attributions:[
                        new ol.Attribution({
                            html: 'Instituto Geográfico Agustin Codazzi' + 
                            '<a href="http://www.igac.gov.co">IGAC</a>',
                        }),
                    ],

                })          
            });


// Overlayers           

var viviendas = new ol.layer.Tile({
                title:'Viviendas',
                source: new ol.source.TileWMS({
                    url:'http://localhost:8080/geoserver/FrCS/wms',
                    params:{LAYERS:'viviendas', format:"image/png"},
                })
            });


/** 
* Create the map
*/

var vista= new ol.View({
                projection: "EPSG:3857",
                center: ol.proj.transform([-71.94012,4.3937],'EPSG:4326', 'EPSG:3857'),
                zoom:12.5,
            });

            var map= new ol.Map({
                target:'map',
                view: vista,
                layers:[ IGAC, viviendas],
                logo: {
                    href:"http://fundacionpervivir.com",
                    src:"img/pervivir_fondo.png",
                },
                overlays: [overlay],
                controls: ol.control.defaults().extend([
                    new ol.control.MousePosition({
                        coordinateFormat: ol.coordinate.toStringHDMS,
                    }),
                    new ol.control.ScaleLine (),
                    new ol.control.ZoomSlider(),
                ]), 

            });


/**
 * Add a click handler to the map to render the popup.
 */
map.on('singleclick', function(evt) {
  var coordinate = evt.coordinate;
  document.getElementById('info').innerHTML = '';
  var vistaResolution = /** @type {number} */ (vista.getResolution());
  var url = wmsSource.getGetFeatureInfoUrl(
      evt.coordinate, vistaResolution, 'EPSG:3857',
      {'INFO_FORMAT': 'text/html'});

  if (url) {
    content.getElementById('info').innerHTML =
        '<code>' + url + '</code>';
  }
  overlay.setPosition(coordinate);
});

Best Answer

Solved, it was an issue with the document.getElementById('info').innerHTML, it had to be content.innerHTML. As below content.getElementById also content.innerHTML

Related Question