2

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?

3 Answers 3

3

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

6
  • 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. Nov 20, 2015 at 12:21
  • pavlos Fiddle is good but what if I want to draw both line and rectangle measure ? Nov 20, 2015 at 12:25
  • I have just tried this and it removes both measurement options.
    – Chris
    Nov 20, 2015 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, 2015 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, 2018 at 21:27
0

Doing it without jQuery I used the following:

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

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.

0

Without jquery, this worked for me, the statement "while (staticTooltip.length> 0)" selects all the measurements made, if your tool allows multiple measurements:

var staticTooltip = document.getElementsByClassName('tooltip-static');
            while(staticTooltip.length > 0){
                staticTooltip[0].parentNode.removeChild(staticTooltip[0]);
            }

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.