Remove Interactions and Clear Vectors Openlayers3?

Question

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

Answer 1

This can be simplified by declaring a draw function and passing the type property into it.

For example:

function drawFunction(type) {
  var geometryFunction, maxPoints;
  var draw = new ol.interaction.Draw({
    source: source,
    type: type,
    geometryFunction: geometryFunction,
    maxPoints: maxPoints
  });

This can then be called using:

drawFunction(Point);