From ee6724cddb98532ab573204d659eb9f31d17bf7e Mon Sep 17 00:00:00 2001
From: Philip Beelmann <philip.beelmann@geofabrik.de>
Date: Tue, 25 Apr 2023 10:21:36 +0000
Subject: [PATCH] show line and polygon measurements while drawing / editing

---
 umap/static/umap/js/umap.controls.js | 35 +++++++++++++++++++---------
 umap/static/umap/js/umap.features.js | 12 ++++++++--
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index a1fbfc69..de8d540b 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -1250,21 +1250,34 @@ L.U.Editable = L.Editable.extend({
 
     drawingTooltip: function (e) {
         var content;
-        var readableDistance;
         if (e.layer instanceof L.Marker) content = L._('Click to add a marker');
         else if (e.layer instanceof L.Polyline) {
-            if (!e.layer.editor._drawnLatLngs.length) {
-                if (e.layer instanceof L.Polygon){
-                    content = L._('Click to start drawing a polygon');
-                } else if (e.layer instanceof L.Polyline) {
-                    content = L._('Click to start drawing a line');
+            // when drawing a Polyline or Polygon
+            if (e.layer.editor._drawnLatLngs) {
+                // when drawing first point
+                if (!e.layer.editor._drawnLatLngs.length) {
+                    if (e.layer instanceof L.Polygon){
+                        content = L._('Click to start drawing a polygon');
+                    } else if (e.layer instanceof L.Polyline) {
+                        content = L._('Click to start drawing a line');
+                    }
+                } else {
+                    var readableDistance = e.layer.getMeasure(e.latlng);
+                    if (e.layer.editor._drawnLatLngs.length < e.layer.editor.MIN_VERTEX) {
+                        // when drawing second point
+                        content = L._('Click to continue drawing ({distance})', { distance: readableDistance });
+                    }  else {
+                        // when drawing third point (or more)
+                        content = L._('Click last point to finish shape ({distance})', { distance: readableDistance });
+                    }
                 }
             } else {
-                var tempLatLngs = e.layer.editor._drawnLatLngs.slice();
-                tempLatLngs.push(e.latlng);
-                var length = L.GeoUtil.lineLength(this.map, tempLatLngs);
-                readableDistance = L.GeoUtil.readableDistance(length, this.map.measureTools.getMeasureUnit());
-                content = L._('Click last point to finish shape ({distance})', {distance: readableDistance});
+                // when moving an existing point
+                if (e.layer instanceof L.Polygon){
+                    content = L._('Polygon area: {area}', { area: e.layer.getMeasure() });
+                } else if (e.layer instanceof L.Polyline) {
+                    content = L._('Line distance: {distance}', { distance: e.layer.getMeasure() });
+                }
             }
         }
         if (content) {
diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index f4f51ae2..b6df7a41 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -853,8 +853,16 @@ L.U.Polyline = L.Polyline.extend({
         return 'polyline';
     },
 
-    getMeasure: function () {
-        var length = L.GeoUtil.lineLength(this.map, this._defaultShape());
+    getMeasure: function (extraPoint) {
+        var polyline;
+        if (extraPoint){
+            var tmpLatLngs = this.editor._drawnLatLngs.slice();
+            tmpLatLngs.push(extraPoint);
+            polyline = tmpLatLngs;
+        } else {
+            polyline = this._defaultShape();
+        }
+        var length = L.GeoUtil.lineLength(this.map, polyline);
         return L.GeoUtil.readableDistance(length, this.map.measureTools.getMeasureUnit());
     },