I have a simple mapping application that allows a user to select a draw type eg polygon or point and then draw shapes on the map.
I have to use buttons instead of a dropdown list to select the draw type, my issue comes when I try to clear the previous draw type, eg the user clicks polygon > draws shape > changes their mind > clicks point > map sucessfully clears previous interactions > but when they go to draw the shape now draws both a polygon and a point.
Below is a snippet of code for the draw point event trigered by a button press
document.getElementById("drawPoint").addEventListener("click", function drawPoint() {
var geometryFunction, maxPoints;
draw = new ol.interaction.Draw({
source: source,
type: ("Point"),
geometryFunction: geometryFunction,
maxPoints: maxPoints
});
vector.getSource().clear();
map.addInteraction(draw);
source.on('addfeature', function(evt){
var feature = evt.feature;
var coords = feature.getGeometry().getCoordinates();
});
});
the polygon button is the exact same apart from shape etc. I am trying to use the following function to clear the map and the interactions but seem to be missing something.
document.getElementById("myForm").addEventListener("change", changeFunc);
function changeFunc() {
map.removeInteraction(draw);
vector.getSource().clear();
addInteraction();
}