I have created a web portal in which measurement tool is available where user select measure distance and area.

Now my problem is how to activate and deactivate it when user click on button. here is my html

 <form class="measuring-types">
      <div class="form-group">
        <div class="radio">
            <input type="radio" name="measurement" value="Polygon" checked> Area
      <div class="form-group">
        <div class="radio">
            <input type="radio" name="measurement" value="LineString"> Distance

here is my javacsript code

var measurementRadios = $('[type=radio]');
var resultElement = $('#js-result');
var measuringTool;

var enableMeasuringTool = function() {

  var geometryType = measurementRadios.filter(':checked').val();
  var html = geometryType === 'Polygon' ? '<sup>2</sup>' : '';

  measuringTool = new ol.interaction.Draw({
    type: geometryType,
    source: vectorLayer.getSource()

  measuringTool.on('drawstart', function(event) {

    event.feature.on('change', function(event) {
      var measurement = geometryType === 'Polygon' ? event.target.getGeometry().getArea() : event.target.getGeometry().getLength();

      var measurementFormatted = measurement > 100 ? (measurement / 1000).toFixed(2) + 'km' : measurement.toFixed(2) + 'm';

      resultElement.html(measurementFormatted + html);


measurementRadios.on('change', enableMeasuringTool);


How to deactivate measurement on button click.

  • 2
    Have you tried measuringTool.setActive(false); or map.removeInteraction(measuringTool); ? – Mike May 7 at 8:21
  • oh yes map.removeInteraction(measuringTool); is working. thanks a lot. – sanju verma May 7 at 9:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.