Get information from multiple layers

Instead of returning just the first feature found you should loop through all the features and build up the output.

map.on('singleclick', function (evt) {
    var features = map.getFeaturesAtPixel(evt.pixel);
    if (feature.length > 0) {
      var field1 = document.getElementById('autorOb');
      field1.innerHTML = '';
      var field2 = document.getElementById('dateOb');
      field2.innerHTML = '';
      var field3 = document.getElementById('ImgOb');
      field3.innerHTML = '';
      var field4 = document.getElementById('PezOb');
      field4.innerHTML = '';
      var field5 = document.getElementById('LocaOb');
      field5.innerHTML = '';
      features.forEach(function(feature){
        field1.innerHTML += feature.get('autor');
        field2.innerHTML += feature.get('obs_date');
        field3.innerHTML += '<img src="'+feature.get('imagen')+'"/>';
        field4.innerHTML += feature.get('scientific_name');
        field5.innerHTML += feature.get('location');
      });
    }
});

You could get neater output by adding the results to new rows in an HTML table.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top