How to show multiple feature info on a map click of multiple layers displayed using geoserver

Question

var element = document.getElementById('popup');
var popup = new ol.Overlay({
          element: element,
          positioning: 'bottom-center',

          stopEvent: false
      });
      map.addOverlay(popup);
var Source_ATM =
        new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/BMC/wms',
        params: {
            'LAYERS': 'BMC:atm',
            'VERSION': '1.1.0',
            'FORMAT': 'image/png',
            'TILED': true
        },
        id:"atm",
        serverType:'geoserver'
        });


    var Layer_ATM = new ol.layer.Tile({
        source: Source_ATM,

    });

    Layer_ATM.setVisible(false);

    //block_boundary Layer
    var Source_BlockBoundary =
        new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/BMC/wms?',
        params: {
            'LAYERS': 'BMC:block_boundary',
            'VERSION': '1.1.0',
            'FORMAT': 'image/png',
            'TILED': true
        },
        id:"block_boundary",
        serverType:'geoserver'
    });

    var Layer_block_boundary = new ol.layer.Tile({
        source: Source_BlockBoundary,

    });

    Layer_block_boundary.setVisible(false);
    function featureinfoFun() {

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

                      var view = map.getView();
                      var viewResolution = view.getResolution();

                      var source = Layer_block_boundary.getSource();
                      //var source2=Layer_test.getSource();

                      var url = source.getGetFeatureInfoUrl(
                        evt.coordinate, viewResolution, view.getProjection(),
                        { 'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50 });

                      if (url) {
                          var coordinate = evt.coordinate;
                          popup.setPosition(coordinate);
                          $(element).popover("destroy");
                          $(element).popover({
                              'placement': 'top',
                              'html': true,
                              'content': '<iframe style="width: 105%;"seamless src="' + url + '"></iframe>'

                          });

                          $(element).popover('show');
                          $(element).css('display', 'block');
                          //$(element).popup.classList.toggle('show');
                          //$(element).popup.close();
                      }
                  });
            }

    .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 280px;
          }
          .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
          }
          .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
          }
          .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
          }
          .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
          }
          .ol-popup-closer:after {
            content: "✖";
          }

    <div id="map1" class="map" style="position: fixed; height:100%; margin-top: 28px;">

                    <!--div class="ol-toggle-options ol-unselectable"><a title="Toggle options toolbar" onClick="toggleControlPanel()" href="#toggle"></a></div-->

                    <div id="popup" class="ol-overlay-container" style="width:200px;height: 0px;">
                    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                        <div id="popup-content" class="popover-content"></div>

This is my code. Please help me to display feature information of both of the layers. please help me with code. I want to show multiple layers and when i click on a layer and another layer it will display the attribute information coming from geoserver for both of the layers

Answer 1

To show information from both layers you either need to make two getFeatureInfo requests (one for each layer). Or, you can combine the two layers in the request by setting the LAYERS & QUERY_LAYERS parameters to be a comma separated list of layer names (if you are specifying styles then you will also need to add both style names to the STYLES parameter).

The easiest way to do this is to add LAYERS & QUERY_LAYERS to the param block when calling getFeatureInfoUrl