OpenLayers – How to Stop Interaction in OpenLayers4

Question

I'm trying to add the measure function to the map but I want to activate/deactivate the function on a value.

This is the measure code:

    function measure() {

    var sketch;
    var helpTooltipElement;
    var helpTooltip;
    var measureTooltipElement;
    var measureTooltip;

    var continueLineMsg = 'Click to continue drawing the line';

    var pointerMoveHandler = function(evt) {
      if (evt.dragging) {
      return;
    }

    var helpMsg = 'Click to start drawing';

    if (sketch) {
      var geom = (sketch.getGeometry());
      helpMsg = continueLineMsg;
    }

    helpTooltipElement.innerHTML = helpMsg;
    helpTooltip.setPosition(evt.coordinate);

    helpTooltipElement.classList.remove('hidden');
    };

    map.on('pointermove', pointerMoveHandler);

    map.getViewport().addEventListener('mouseout', function() {
      helpTooltipElement.classList.add('hidden');
    });

    var typeSelect = document.getElementById('ruler');

    var draw;

    var formatLength = function(line) {
      var length = ol.Sphere.getLength(line);
      var output;

      if (length > 100) {
        output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km';
      } else {
        output = (Math.round(length * 100) / 100) + ' ' + 'm';
      }
      return output;
    };

    function addInteraction() {
      var type = 'LineString';

    draw = new ol.interaction.Draw({
      source: source,
      type: type,
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(0, 0, 0, 0.5)',
          lineDash: [10, 10],
          width: 2
        }),
        image: new ol.style.Circle({
          radius: 5,
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 0, 0.7)'
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          })
        })
      })
    });

      map.addInteraction(draw);

      createMeasureTooltip();
      createHelpTooltip();

      var listener;
      draw.on('drawstart', function(evt) {

        sketch = evt.feature;

        var tooltipCoord = evt.coordinate;

        listener = sketch.getGeometry().on('change', function(evt) {
        var geom = evt.target;
        var output;
        if (geom instanceof ol.geom.Polygon) {
          output = formatArea(geom);
          tooltipCoord = geom.getInteriorPoint().getCoordinates();
        } else if (geom instanceof ol.geom.LineString) {
          output = formatLength(geom);
          tooltipCoord = geom.getLastCoordinate();
        }
        measureTooltipElement.innerHTML = output;
        measureTooltip.setPosition(tooltipCoord);
        });
      }, this);

        draw.on('drawend',
        function() {
          measureTooltipElement.className = 'tooltip tooltip-static';
          measureTooltip.setOffset([0, -7]);
          sketch = null;
          measureTooltipElement = null;
          createMeasureTooltip();
          ol.Observable.unByKey(listener);
        }, this);

    } //end addInteraction function


    function createHelpTooltip() {
      if (helpTooltipElement) {
        helpTooltipElement.parentNode.removeChild(helpTooltipElement);
      }

      helpTooltipElement = document.createElement('div');
      helpTooltipElement.className = 'tooltip hidden';
      helpTooltip = new ol.Overlay({
        element: helpTooltipElement,
        offset: [15, 0],
        positioning: 'center-left'
      });
      map.addOverlay(helpTooltip);
    } // end createHelpTooltip


    function createMeasureTooltip() {
      if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement);
      }
      measureTooltipElement = document.createElement('div');
      measureTooltipElement.className = 'tooltip tooltip-measure';
      measureTooltip = new ol.Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center'
      });
      map.addOverlay(measureTooltip);
    } // end createMeasureTooltip


      if ($("#ruler").val() == "LineString") {
        addInteraction();
      } else if ($("#ruler").val() == "none") {
        map.removeInteraction(draw);
      }

    } // end measure function


    $("#ruler").change( function() {
      if ($("#ruler").val() == "LineString") {
        measure();
      }
    });

Take directly from OL4 examples:

https://openlayers.org/en/v4.6.5/examples/measure.html

At the moment the map load without the measure function and when I change to LineString the function start, now how can I stop the measure function to work and remove all the functionality of this layer?

Answer 1

At the end I found a solution, I don't know if there are simple ways but for me, it works.

$("#ruler").change( function() {
  if ($("#ruler").val() == "LineString") {
    addInteraction();
  }
  if ($("#ruler").val() == "none") {
    map.removeInteraction(draw);
    vector.getSource().clear(true);
    map.removeLayer(vector);
    $(".tooltip ").remove();
  }
});