1

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

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

0

I see that your overlay isn't connected to your map you need to connect it in your code like this :

map.addOverlay(overlay);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.