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