I have implemented the measure example available on the OpenLayers 3 site (http://openlayers.org/en/v3.11.2/examples/measure.html) and I am currently trying to include a clear button that will clear both the drawn area / line and label from the map.

I've found the getSource().clear() option will clear the drawn shape from the map, but I am struggling to work out how I can clear the measurement label?

I have tried the map.removeOverlay() method with 'measureTooltip' but this doesn't work.

How can I also remove this label from the map?


I guess you use jquery. if so do the following to remove the tooltips from map:

$( ".tooltip" ).remove();

this should remove every element with class 'tooltip' from document. check this fiddle it is from an older question. Within the fiddle the code snip adove is asigned when drawstart event occurs, because thats the way user wanted to be. You may place it within your function that clears the measures

  • I saw that example too. My view is there should be start and stop measure button apart from clear button to completely implement that flow. Will soon post my answer. – Abhijit Gujar Nov 20 '15 at 12:21
  • pavlos Fiddle is good but what if I want to draw both line and rectangle measure ? – Abhijit Gujar Nov 20 '15 at 12:25
  • I have just tried this and it removes both measurement options. – Chris Nov 20 '15 at 12:41
  • As said remove the code snip from drawstart event and wrap it within your clear function. check the fiddle here jsfiddle.net/p_tsagkis/72he7hvd should be what you want – pavlos Nov 20 '15 at 12:46
  • I have tried to implement this with a button click but after executing and then drawing a new a measurement no label appears. How can I make sure a new label shows? I added createMeasureTooltip after $( ".tooltip" ).remove(); but this doesn't work. – kflaw Apr 20 '18 at 21:27

Doing it without jQuery I used the following:

var staticTooltip = document.getElementsByClassName("tooltip-static")[0];
if (staticTooltip) {

I'm looking for "tooltip-static" class because the drawend event in the example sets the working tooltip to that class. And I create a new tooltip with createMeasureTooltip() so that future measures will have a tooltip.

Your Answer

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

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