[GIS] Querying multiple WMS layers in OL3 and adding to a single popup window

getfeatureinfoopenlayerswms

I've created a simple mapping application that shows a number of WMS layers (from GeoServer/Oracle) on a map, with check-boxes to turn them on and off. The layer list is generated dynamically from a table in a database. What I need to do now is add the ability to query multiple layers. Many of the layers overlap so I need to be able to click on a point and it show all the information from the selected features for the layers that have been turned on.

I can do this for a single layer (either by index in the collection or filtering by name) using the OpenLayers 3 example on their site. However, I want to be able to click on the map, and any layers that are turned on are queried and added to the same popup window. So far I have this code which generates the URL for each layer: 

map.on('singleclick', function(evt) {
var coordinate = evt.coordinate; //Picks up click coordinates
var viewResolution = view.getResolution(); //Picks up map current resolution
var layersCollection = map.getLayers(); //Creates collection of layers object from layers that have been turned on. 
var i;
for (i = 1; i <= ((layersCollection.a.length-1)); i++)
{ //Loops through all layers excluding baselayer at index 0 and gets their URL
    var layerID = layersCollection.item(i);
    var url = layerID.getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, Projection,{'INFO_FORMAT': 'text/plain'});
}

This generates a URL for each layer. Normally then for a single layer I would use an iframe to get the information into the overlay like this:

if (url) {
overlay.setPosition(coordinate);
    content.innerHTML = 
    '<iframe  src="' + url + '"></iframe>';
    container.style.display = 'block';
};

But I can't work out how to do this for multiple layers. Anybody have any ideas? Apologies for my basic JavaScript skills.

Related Question