OL3: Getting overlayed layers by coordinate - openlayers-3

Question

I want to get different overlayed layers by clicking on the map so that the user can choose which one want to get feature info through a pop-up.
I am using map.forEachFeatureAtPixel but I just get one of the overlayed layers.
var prue=[];
layers=[]
var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
l=layer.get('name');
console.log("CAPA:",l)
layers.push(l);
console.log(layers);
if (layer == rustic_wfs){
var capa= "rustica";
prue[0]=capa;
return feature;};
if (layer == zonas_wfs){
var capa="zonas";
prue[0]=capa;
return feature;}
});
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});

Answer 1

The ol.Map#forEachFeatureAtPixel will be called with all features at the provided pixel until you return a truthy value, which you do in your snippet (return feature). So to get all features, never return a truthy value. The function needs to look something like this:
var layers = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
if (layers.indexOf(layer) == -1) {
layers.push(layer);
}
});

Answer 2

Try something like this:
function displayFeatureInfo(evt) {
var txt = "";
olMap.forEachFeatureAtPixel(evt.pixel, function (feature, source) {
//In the feature is the information of layer
//In the source is the layer
//you can save the "source" in you array to get all layers
var features = feature.getProperties();
Object.getOwnPropertyNames(features).forEach(function (campo, idx, array) {
var valor = features[campo];
txt += "<b>" + campo + ":</b> " + valor + "<br />";
});
var coordinate = evt.coordinate;
content.innerHTML = "<p style='padding: 0px'><b>Información:</b></p>" + txt + "<br/>";
txt += "<br/>------------------------<br/><br/>";
overlay.setPosition(coordinate);
});
};
Ignore "overlay" and "content", it is the way like I show the pop-up