[GIS] Select multiple features in OpenLayers 3

openlayers

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 = '&nbsp;';
    }
  };

map.on('click', function(evt) {
displayFeatureInfoClick(evt.pixel); 
});

Best Answer

You may want this:

var selectClick = new ol.interaction.Select({
    condition: ol.events.condition.click,
    toggleCondition: ol.events.condition.shiftKeyOnly,  
});
map.addInteraction(selectClick);

var selectedFeaturesClick = selectClick.getFeatures();
var info = [];
selectClick.on('select', function(evt) {
    var feature = evt.selected[0];

    selectedFeaturesClick.push(feature);
    info.push(feature.get('DIVISION')); 

    if (info.length> 0) {
        infoBox2.innerHTML = info.join(', ');
    }
});

There is no add event on ol.interaction.Select and you're not creating a feature reference.

Related Question