0

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);
      }
  • 1
    If there some form of error message or feedback? Or just the delete just not do anything? – Mark Ireland Sep 30 '16 at 19:31
  • Delete just does nothing. – untalentedPerfectionist Sep 30 '16 at 20:05
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.

  • I found error message "TypeError: featureOverlay.removeFeature is not a function". But I don't understand why it's not a function. – untalentedPerfectionist Oct 3 '16 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... – untalentedPerfectionist Oct 3 '16 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) – untalentedPerfectionist Oct 3 '16 at 8:29

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.