gistfile1.js

map.on('singleclick', function(evt) {
  var viewResolution = map.getView().getView2D().getResolution();
  var layers = map.getLayers();
  var gfi = [];
  var formats = [], titles = [];
  layers.forEach(function(layer) {
    if (layer.getVisible() === true && layer instanceof ol.layer.Tile && layer.getSource() instanceof ol.source.TileWMS) {
      var url = layer.getSource().getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, map.getView().getView2D().getProjection(),
        {'INFO_FORMAT': infoFormat});
      if (url) {
        gfi.push($.ajax({url: url}));
        titles.push(layer.get('title'));
        formats.push(gfiFormats[layer.getSource().getParams()['LAYERS']]);
      }
    }
  });
  $.when.apply($, gfi).then(function() {
    var features = [];
    var i, ii;
    for (i=0, ii=arguments.length; i<ii; ++i) {
      var f = formats[i].readFeatures(arguments[i][0]);
      if (f[0] !== null) {
        features.push(f[0]);
      }
    }
    highlight.getSource().clear();
    var html = '', hasContent = false;
    for (i=0, ii=features.length; i<ii; ++i) {
      var feature = features[i];
      feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
      highlight.getSource().addFeature(feature);
      html += '<p style="font-weight: bold; margin-top: 5px; margin-bottom:5px">' + titles[i] + '</p>';
      html += '<table class="table table-striped table-bordered table-condensed">';
      var values = feature.getProperties();
      for (var key in values) {
        if (key !== 'the_geom' && key !== 'boundedBy') {
          html += '<tr><td>' + key + '</td><td>' + values[key] + '</td></tr>';
          hasContent = true;
        }
      }
      html += '</table>';
    }
    if (hasContent === true) {
      popup.setPosition(evt.coordinate);
      popup.setContent(html);
      popup.show();
    } else {
      popup.hide();
    }
  });
});