From 7065722fa6108a3bbc3e235a7b49ae49d2245dd2 Mon Sep 17 00:00:00 2001
From: Pierre GIRAUD <pierre.giraud@camptocamp.com>
Date: Mon, 8 Jun 2015 14:51:54 +0200
Subject: [PATCH 1/2] Show measurement tooltip on geometry change instead of
 relying on pointermove

---
 examples/measure.js | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/examples/measure.js b/examples/measure.js
index 2bd97db8d2..31961d569e 100644
--- a/examples/measure.js
+++ b/examples/measure.js
@@ -103,27 +103,19 @@ var pointerMoveHandler = function(evt) {
   }
   /** @type {string} */
   var helpMsg = 'Click to start drawing';
-  /** @type {ol.Coordinate|undefined} */
-  var tooltipCoord = evt.coordinate;
 
   if (sketch) {
-    var output;
     var geom = (sketch.getGeometry());
     if (geom instanceof ol.geom.Polygon) {
-      output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
       helpMsg = continuePolygonMsg;
-      tooltipCoord = geom.getInteriorPoint().getCoordinates();
     } else if (geom instanceof ol.geom.LineString) {
-      output = formatLength( /** @type {ol.geom.LineString} */ (geom));
       helpMsg = continueLineMsg;
-      tooltipCoord = geom.getLastCoordinate();
     }
-    measureTooltipElement.innerHTML = output;
-    measureTooltip.setPosition(tooltipCoord);
   }
 
   helpTooltipElement.innerHTML = helpMsg;
   helpTooltip.setPosition(evt.coordinate);
+
 };
 
 
@@ -172,10 +164,28 @@ function addInteraction() {
   createMeasureTooltip();
   createHelpTooltip();
 
+  var listener;
   draw.on('drawstart',
       function(evt) {
         // set sketch
         sketch = evt.feature;
+
+        /** @type {ol.Coordinate|undefined} */
+        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(/** @type {ol.geom.Polygon} */ (geom));
+            tooltipCoord = geom.getInteriorPoint().getCoordinates();
+          } else if (geom instanceof ol.geom.LineString) {
+            output = formatLength( /** @type {ol.geom.LineString} */ (geom));
+            tooltipCoord = geom.getLastCoordinate();
+          }
+          measureTooltipElement.innerHTML = output;
+          measureTooltip.setPosition(tooltipCoord);
+        });
       }, this);
 
   draw.on('drawend',
@@ -187,6 +197,7 @@ function addInteraction() {
         // unset tooltip so that a new one can be created
         measureTooltipElement = null;
         createMeasureTooltip();
+        ol.Observable.unByKey(listener);
       }, this);
 }
 

From c9ab9bc711c7fc329d993b888c2f47f352667a88 Mon Sep 17 00:00:00 2001
From: Pierre GIRAUD <pierre.giraud@camptocamp.com>
Date: Mon, 8 Jun 2015 15:30:02 +0200
Subject: [PATCH 2/2] Hide the help tooltip when cursor is out of the map

---
 examples/measure.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/examples/measure.js b/examples/measure.js
index 31961d569e..c1d45615f2 100644
--- a/examples/measure.js
+++ b/examples/measure.js
@@ -1,4 +1,5 @@
 goog.require('ol.Map');
+goog.require('ol.Observable');
 goog.require('ol.Overlay');
 goog.require('ol.Sphere');
 goog.require('ol.View');
@@ -116,6 +117,7 @@ var pointerMoveHandler = function(evt) {
   helpTooltipElement.innerHTML = helpMsg;
   helpTooltip.setPosition(evt.coordinate);
 
+  $(helpTooltipElement).removeClass('hidden');
 };
 
 
@@ -130,6 +132,10 @@ var map = new ol.Map({
 
 map.on('pointermove', pointerMoveHandler);
 
+$(map.getViewport()).on('mouseout', function() {
+  $(helpTooltipElement).addClass('hidden');
+});
+
 var typeSelect = document.getElementById('type');
 var geodesicCheckbox = document.getElementById('geodesic');
 
@@ -210,7 +216,7 @@ function createHelpTooltip() {
     helpTooltipElement.parentNode.removeChild(helpTooltipElement);
   }
   helpTooltipElement = document.createElement('div');
-  helpTooltipElement.className = 'tooltip';
+  helpTooltipElement.className = 'tooltip hidden';
   helpTooltip = new ol.Overlay({
     element: helpTooltipElement,
     offset: [15, 0],