Presented here is a creative solution that utilizes a button for the purpose of deleting a vertex within a specific context. The visibility of the button is toggled based on the presence of a vertex to delete, which may be displayed as a popup.
Key features of this solution include:
- A condition option that determines when to display the delete button based on the proximity of a point to the user's click.
- An insertVertexCondition option that controls the visibility of the button when no vertex is present at the current location.
- The utilization of modifystart and modifyend events to dynamically hide the button while the user is actively moving around the map.
- A removePoint function that is triggered when the delete button is clicked.
The visibility of the button is dependent on the user's actions, ensuring that it is only shown when relevant and does not rely on undocumented or private features.
To see this solution in action, check out the demonstration here.
var btElt = document.getElementById("delete");
// Modify interaction
var mod = new ol.interaction.Modify({
source: vector.getSource(),
condition: function(e){
var f = this.getMap().getFeaturesAtPixel(e.pixel,{
hitTolerance:5
});
if (f) {
var p0 = e.pixel;
var p1 = f[0].getGeometry().getClosestPoint(e.coordinate);
p1 = this.getMap().getPixelFromCoordinate(p1);
var dx = p0[0]-p1[0];
var dy = p0[1]-p1[1];
if (Math.sqrt(dx*dx+dy*dy) > 8) {
f = null;
}
}
if (f) btElt.style.display = "inline-block";
else btElt.style.display = "none";
return true;
},
insertVertexCondition: function(e) {
btElt.style.display = "none";
return true;
}
});
mod.on(['modifystart','modifyend'], function(){
btElt.style.display = "none";
});
map.addInteraction(mod);
function deleteVertex() {
mod.removePoint();
btElt.style.display = "none";
}