1

I have problems with deleting a selected feature in openlayers 3. Last week I've spend reading this forum and ol API and trying to find an answer to my problem. I want to draw some polygons, be able to select them (or at least one) and then delete the selected feature. With my code I can draw polygons and select them but I've not been able to delete them. What goes wrong? I started playing with openlayers 3 two weeks ago. I hope my problem is not a missing semicolon somewhere...

var features = new ol.Collection(); 
var featureOverlay = new ol.layer.Vector({
        source: new ol.source.Vector({features: features}),
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        })
  }); 
featureOverlay.setMap(map); 
var draw; 
var typeSelect = document.getElementById('type');
function addInteraction(){
    if ((typeSelect.value) !== 'None') {
        draw = new ol.interaction.Draw({
            features: features,
            type: (typeSelect.value)
            });
        map.addInteraction(draw);
    }
    else {
        draw.finishDrawing();
    }
}
var select = null;  
var selectSingleClick = new ol.interaction.Select({
    condition: ol.events.condition.singleClick
});
var selectElement = document.getElementById('type2');
var selectedFeature =selectSingleClick.getFeatures();
var changeInteraction = function() {
    if (select !== null) {
        map.removeInteraction(select);
        }
    var value = selectElement.value;
    if (value == 'singleclick') {
        select = selectSingleClick;         
        } 
        else {
            select = null;
        }
    if (select !== null) {
        map.addInteraction(select);         
        }
    };
selectElement.onchange = changeInteraction;
changeInteraction();
typeSelect.onchange = function() {
    map.removeInteraction(draw);
    addInteraction();
    };
addInteraction();
function deleteHandler(){featureOverlay.removeFeature(selectedFeature)};
var deleteFeature = function(evt){
    if(evt.keyCode == 46){ 
        deleteHandler()
        }
    };
document.addEventListener('keydown', deleteFeature, false);
      }
2
  • 1
    If there some form of error message or feedback? Or just the delete just not do anything? Commented Sep 30, 2016 at 19:31
  • Delete just does nothing. Commented Sep 30, 2016 at 20:05

1 Answer 1

1

You need to remove features from the source, not the layer. So do featureOverlay.getSource().removeFeature(feature); But since you don't get an error message, I wonder if your code gets executed at all. Place breakpoints and debug it if not.

3
  • I found error message "TypeError: featureOverlay.removeFeature is not a function". But I don't understand why it's not a function. Commented Oct 3, 2016 at 8:05
  • .EDIT: I changed it as featureOverlay.getSource().removeFeature(feature); and now I get TypeError: this.s[b] is undefined ...k.Rf=function(a){var b=x(a).toString();this.s[b].forEach(Ea);delete this.s[b];va... Commented Oct 3, 2016 at 8:15
  • Edit2: I had removeFeature(features) ---> changed it (feature) an now the error message is ReferenceError: feature is not defined function deleteHandler(){featureOverlay.getSource().removeFeature(feature)}; There is also another error message: TypeError: a is null ol.js(line 646 col 4) Commented Oct 3, 2016 at 8:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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