2

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?

2
  • you can remove draw interaction from map to stop drawing
    – Chase Choi
    Nov 14, 2017 at 1:38
  • I found a way (see my answer below) however, I need to think about a better way. I need to add more than one interaction, so I need a simple way to switch between them.
    – DevWizard
    Nov 15, 2017 at 8:40

1 Answer 1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.