How can I display all the properties of a feature using the map.forEachFeatureAtPixel method? I get a single value, I try to put a for loop to get all the properties, but it doesn't support it. I have this code that works to get a single value. Using forEachFeatureAtPixel allows me to choose the layer on which I want to display information. This is the code
map.on('click', function (evt) {
document.getElementById("divInformation").innerHTML = '<h1>Click for Info</h1>';
var layer;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, featureLayer) {
layer = featureLayer;
return feature;
});
var el = document.getElementById('divInformation');
el.innerHTML = '';
if(layer === vectorLayer1){
el.innerHTML += feature.get('cod');
el.innerHTML += feature.get('date);
}else if(layer === vectorLayer2){
el.innerHTML += feature.get('name');
el.innerHTML += feature.get('Percent');
}else{
el.innerHTML = '<h1>click for Info</h1>';
}
});
To display all properties of a feature use JSON.stringify(feature.getProperties()) as in https://openlayers.org/en/latest/examples/vector-tile-info.html
For more control over formatting use a for ... in loop. You could then exclude internal property keys such as geometry which would not be meaningful when displayed.
var key;
var properties = feature.getProperties();
for (key in properties) {
el.innerHTML += key + ': ' + properties[key];
}