Get single popup onclick different WMS layers using OpenLayers 3

Question

I am trying to develop a web mapping application. I have more than two WMS layers and trying to GetFeatureInfo onclick the layer. I tried the answer posted on this link. But whenever I click on one layer three popups are displayed in spite of clicking only on one layer. I am stuck on how to resolve the issue.

Below is the code am working on:

    map.on('singleclick', function (evt1) {
    var coordinate = evt1.coordinate;
    content.innerHTML = '';
    var viewResolution =(view.getResolution());
    var url = '';
    content.innerHTML = ''; 
    layers.forEach(function (layer, i, layers) {
      if (layer.getVisible() && layer.get('name')!='Basemap') {
            url = layer.getSource().getGetFeatureInfoUrl(evt1.coordinate, viewResolution, 'EPSG:3857', {
                'INFO_FORMAT': 'text/html','FEATURE_COUNT': '300', 'WIDTH':500, 'HEIGHT':500,
            });

            if (url) {
              var left_f = "left_frame";
              content.innerHTML += '<p><b>You clicked here:</b></p><iframe class="'+left_f+'" seamless src="' + url +
                    '"></iframe>';
                overlay.setPosition(coordinate);
            }else{
                        content.innerHTML = '';
            }
        }
    });

});

Query:

GetFeatureInfo with a popup on click single layer or multiple layers. Is there any other way to solve this query?

I am new with OpenLayers and have basics of JavaScript. Below screenshots of output are attached.

Answer 1

You are looping through your layers and making a getFeatureInfo request for each one, which is why you see 3 popups. Instead you should make one getFeatureInfo request for the 3 layers.

ql = []
layers.forEach(function (layer, i, layers) {
  if (layer.getVisible() && layer.get('name')!='Basemap') {
     ql.append(layer.get('name');  

  }
  url = layer.getSource().getGetFeatureInfoUrl(evt1.coordinate, viewResolution, 'EPSG:3857', {
            'INFO_FORMAT': 'text/html',
            'FEATURE_COUNT': '300', 
            'QUERYLAYERS':ql.join(',')
        });
 //Fetch info
 var left_f = "left_frame";
          content.innerHTML += '<p><b>You clicked here:</b></p><iframe class="'+left_f+'" seamless src="' + url +
                '"></iframe>';
            overlay.setPosition(coordinate);

});