0

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

1 Answer 1

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

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.