I would like to use a click interaction to select multiple features (I have two vector layers) and show their names inside a infobox. What is wrong?
var selectClick = new ol.interaction.Select({ condition: ol.events.condition.Click, toggleCondition: ol.events.condition.shiftKeyOnly, }); var select = selectClick; map.addInteraction(select); var selectedFeaturesClick = select.getFeatures(); select.on('add', function(e) { var info = []; selectedFeaturesClick.push(feature); info.push(feature.get('DIVISION')); if (info.length> 0) { infoBox2.innerHTML = info.join(', '); } }); I also tried with this following lines but still not working well. I would like to use a click interaction to select multiple features and show their division names inside a infobox2. Using the following code, if I add a new feature (using the Shift key) the infobox2 is updated with the additional feature name (DIVISION) but it is repeated again in the infobox2 when I try to remove this feature from the selection (with the alt key). I would like to deselect a feature and have its division name removed from the infobox2. How is possible?
var infoBox2 = document.getElementById('info2'); var selectClick = new ol.interaction.Select({ addCondition: ol.events.condition.shiftKeyOnly , toggleCondition: ol.events.condition.never, removeCondition: ol.events.condition.altKeyOnly, }); select = selectClick; map.addInteraction(select); var features = select.getFeatures(); var info = []; var displayFeatureInfoClick = function(pixel) { var features = []; map.forEachFeatureAtPixel(pixel, function(feature, layer) { features.push(feature); }); if ( features.length > 0) { for (var i = 0, ii = features.length; i < ii; ++i) { info.push(features[i].get('DIVISION')); } infoBox2.innerHTML = info.join(', '); } else { infoBox2.innerHTML = ' '; } }; map.on('click', function(evt) { displayFeatureInfoClick(evt.pixel); }); 
