2

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); 
}); 
2

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.

  • Thanks for your help. But it is not working for me ..nothing is written inside the infoBox ;( I also tried with the code added above in my comment...but still not working well ;( – tano Aug 16 '15 at 15:28
0

I think Jonatas was near, have same problem, my solution which works:

this.select = new Select({
            condition: click,
            toggleCondition: click,
            features: ...,
            layers: ...
        });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.