WMS GetFeatureInfo (Layers)

All features:
Hotel features:
Restaurant features:

Shows how to fetch features per layer name in a single WMS GetFeatureInfo request

Demonstrates the use of the layers option in the ol.format.WMSGetFeatureInfo format object, which allows features returned by a single WMS GetFeatureInfo request that asks for more than one layer to be read by layer name.

<!DOCTYPE html>
<html>
  <head>
    <title>WMS GetFeatureInfo (Layers)</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.14.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.14.1/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  </head>
  <body>
    <table id="info">
      <tr>
        <td>All features:</td>
        <td id="all"></td>
      </tr>
      <tr>
        <td>Hotel features:</td>
        <td id="hotel"></td>
      </tr>
      <tr>
        <td>Restaurant features:</td>
        <td id="restaurant"></td>
      </tr>
    </table>
    <script>
      $.ajax({
        url: './data/wmsgetfeatureinfo/osm-restaurant-hotel.xml',
        success: function(response) {

          // this is the standard way to read the features
          var allFeatures = new ol.format.WMSGetFeatureInfo().readFeatures(response);
          $('#all').html(allFeatures.length.toString());

          // when specifying the 'layers' options, only the features of those
          // layers are returned by the format
          var hotelFeatures = new ol.format.WMSGetFeatureInfo({
            layers: ['hotel']
          }).readFeatures(response);
          $('#hotel').html(hotelFeatures.length.toString());

          var restaurantFeatures = new ol.format.WMSGetFeatureInfo({
            layers: ['restaurant']
          }).readFeatures(response);
          $('#restaurant').html(restaurantFeatures.length.toString());

        }
      });
    </script>
  </body>
</html>