Display popup with multiple layers - openlayers

Question

I am using geoserver and openlayers to display popup by clicking I have displayed popup with one layer. But I couldn't display popup when I have multiple layers.

map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Group({
                layers: [
                    new ol.layer.Group({
                        layers: [
                            new ol.layer.Tile({
                                source: new ol.source.Stamen({
                                    layer: 'baselayer'
                                })
                            }),


new ol.layer.Image({
                        title:'Sometitle',
                        source: new ol.source.ImageWMS(
                        {
                            ratio:1,
                            url:"http://localhost:wp/wms",
                            params:{
                                'LAYERS':'layer:layername',
                            }
                        })
                    }),
                     new ol.layer.Image({
                        title:'sometitle2',
                        source: new ol.source.ImageWMS(
                        {
                            ratio:1,
                            url:"http://localhost:wp/wms",
                            params:{
                                'LAYERS':'layer:layername',   
                            }
                        })
                    }),

Then using the popup codes,

//Scripts for popup

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


//Displaying popup on click

map.on('singleclick', function(evt) {

    console.log("In singleClick");


    //Check for visible layers
    var data = [];

    layer = map.getSource(); //
    var url = layer.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, view.getProjection(),    
        reqwest({        
            url: url,
            type: 'json',
        }).then(function (data) {
            if (data.features.length == 0) {
              popup.hide(); //If user clicks outside
              return;
            }
            for (var i = 0; i < data.features.length; i++) 
            {
            console.log("In for");

            var feature = data.features[i]; //Read features of JSON array
            var props = feature.properties; //Read properties of feature array
            var data1 = [];
            var data2 = [];

Finally after all codes for popup(That worked for me to display popup for single layer) I used this line to render my popup.

popup.show(evt.coordinate,popup);

It would be more efficient to combine your WMS layers from the same service as a single OpenLayers layer. See this recent question in GIS StackExchange gis.stackexchange.com/questions/332955/… The solution would work equally well for ImageWMS. Your can also override the LAYERS parameter of any OpenLayers WMS layer in a getGetFeatureInfoUrl call by specifying WMS layer names in the QUERY_LAYERS params option. — Mike
Can you please elaborate a little more. Like here I'm taking my layers seperately. And for a single layer it is working fine. Is there any way to combine all layers together and call their features seperately to display the popup. — Musthafa

Mike Mike · Accepted Answer · 2019-08-26T13:18:15

If you find it easier to have separate layers, e.g. in the GIS StackExchange question you only display bedrock geology:

source: new ol.source.ImageWMS({
    url: 'http://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms',
    params: {
        'FORMAT': 'image/png',
        'LAYERS': 'GBR_BGS_625k_BLS',
        'TRANSPARENT': 'TRUE'
    },
    attributions: bgsAttrib,
}),

in an info request you can specify other layers to query, so you could get bedrock and superficial geology in one popup:

source.getGetFeatureInfoUrl( evt.coordinate,
                             view.getResolution,
                             view.getProjection(),
                             { 'QUERY_LAYERS': 'GBR_BGS_625k_BLS,GBR_BGS_625k_SLS',
                               'INFO_FORMAT': 'text/html',
                               'FEATURE_COUNT': '10'} );

Display popup with multiple layers - openlayers

1 Answers