Merge pull request #1068 from knowname/dev

Show distance when drawing Polylines.

umap/static/umap/js/umap.controls.js

@@ -1198,7 +1198,7 @@ L.U.Editable = L.Editable.extend({
 
     initialize: function (map, options) {
         L.Editable.prototype.initialize.call(this, map, options);
-        this.on('editable:drawing:start editable:drawing:click', this.drawingTooltip);
+        this.on('editable:drawing:start editable:drawing:click editable:drawing:move', this.drawingTooltip);
         this.on('editable:drawing:end', this.closeTooltip);
         // Layer for items added by users
         this.on('editable:drawing:cancel', function (e) {
@@ -1249,19 +1249,53 @@ L.U.Editable = L.Editable.extend({
     },
 
     drawingTooltip: function (e) {
+        if (e.layer instanceof L.Marker && e.type != "editable:drawing:move") {
+            this.map.ui.tooltip({content: L._('Click to add a marker')});
+        }
+        if (!(e.layer instanceof L.Polyline)) {
+            // only continue with Polylines and Polygons
+            return;
+        }
+
         var content;
-        if (e.layer instanceof L.Marker) content = L._('Click to add a marker');
+        var measure;
-        else if (e.layer instanceof L.Polyline) {
+        if (e.layer.editor._drawnLatLngs) {
+            // when drawing (a Polyline or Polygon)
             if (!e.layer.editor._drawnLatLngs.length) {
-                if (e.layer instanceof L.Polygon) content = L._('Click to start drawing a polygon');
+                // when drawing first point
-                else if (e.layer instanceof L.Polyline) content = L._('Click to start drawing a line');
+                if (e.layer instanceof L.Polygon){
-            } else if (e.layer.editor._drawnLatLngs.length < e.layer.editor.MIN_VERTEX) {
+                    content = L._('Click to start drawing a polygon');
-                content = L._('Click to continue drawing');
+                } else if (e.layer instanceof L.Polyline) {
+                    content = L._('Click to start drawing a line');
+                }
             } else {
-                content = L._('Click last point to finish shape');
+                var tmpLatLngs = e.layer.editor._drawnLatLngs.slice();
+                tmpLatLngs.push(e.latlng);
+                measure = e.layer.getMeasure(tmpLatLngs);
+
+                if (e.layer.editor._drawnLatLngs.length < e.layer.editor.MIN_VERTEX) {
+                    // when drawing second point
+                    content = L._('Click to continue drawing');
+                }  else {
+                    // when drawing third point (or more)
+                    content = L._('Click last point to finish shape');
+                }
+                content += ", "
+            }
+        } else {
+            // when moving an existing point
+            measure = e.layer.getMeasure();
+        }
+        if (measure){
+            if (e.layer instanceof L.Polygon){
+                content = L._('Polygon area: {measure}', { measure: measure });
+            } else if (e.layer instanceof L.Polyline) {
+                content = L._('Line length: {measure}', { measure: measure });
             }
         }
-        if (content) this.map.ui.tooltip({content: content});
+        if (content) {
+            this.map.ui.tooltip({content: content});
+        }
     },
 
     closeTooltip: function () {

umap/static/umap/js/umap.features.js

@@ -853,8 +853,8 @@ L.U.Polyline = L.Polyline.extend({
         return 'polyline';
     },
 
-    getMeasure: function () {
+    getMeasure: function (shape) {
-        var length = L.GeoUtil.lineLength(this.map, this._defaultShape());
+        var length = L.GeoUtil.lineLength(this.map, shape || this._defaultShape());
         return L.GeoUtil.readableDistance(length, this.map.measureTools.getMeasureUnit());
     },
 
@@ -1004,8 +1004,8 @@ L.U.Polygon = L.Polygon.extend({
         return options.concat(L.U.FeatureMixin.getInteractionOptions());
     },
 
-    getMeasure: function () {
+    getMeasure: function (shape) {
-        var area = L.GeoUtil.geodesicArea(this._defaultShape());
+        var area = L.GeoUtil.geodesicArea(shape || this._defaultShape());
         return L.GeoUtil.readableArea(area, this.map.measureTools.getMeasureUnit());
     },
 

umap/static/umap/locale/de.js

@@ -384,4 +384,4 @@ var locale = {
     "Will be permanently visible in the bottom left corner of the map": "Wird in der unteren linken Ecke der Karte permanent sichtbar sein"
 };
 L.registerLocale("de", locale);
-L.setLocale("de");
+L.setLocale("de");

umap/static/umap/locale/de.json

@@ -382,4 +382,4 @@
     "Permanent credits background": "Dauerhafte Danksagung im Hintergrund",
     "Select data": "Wähle Daten aus",
     "Will be permanently visible in the bottom left corner of the map": "Wird in der unteren linken Ecke der Karte permanent sichtbar sein"
-}
+}

umap/static/umap/locale/en.js

@@ -384,4 +384,4 @@ var locale = {
     "Will be permanently visible in the bottom left corner of the map": "Will be permanently visible in the bottom left corner of the map"
 };
 L.registerLocale("en", locale);
-L.setLocale("en");
+L.setLocale("en");

umap/static/umap/locale/en.json

@@ -382,4 +382,4 @@
     "Permanent credits background": "Permanent credits background",
     "Select data": "Select data",
     "Will be permanently visible in the bottom left corner of the map": "Will be permanently visible in the bottom left corner of the map"
-}
+}

umap/static/umap/locale/en_US.json

@@ -382,4 +382,4 @@
     "Permanent credits background": "Permanent credits background",
     "Select data": "Select data",
     "Will be permanently visible in the bottom left corner of the map": "Will be permanently visible in the bottom left corner of the map"
-}
+}

umap/static/umap/locale/ko.js

@@ -384,4 +384,4 @@ var locale = {
     "Will be permanently visible in the bottom left corner of the map": "Will be permanently visible in the bottom left corner of the map"
 };
 L.registerLocale("ko", locale);
-L.setLocale("ko");
+L.setLocale("ko");

umap/static/umap/locale/ko.json

@@ -382,4 +382,4 @@
     "Permanent credits background": "Permanent credits background",
     "Select data": "Select data",
     "Will be permanently visible in the bottom left corner of the map": "Will be permanently visible in the bottom left corner of the map"
-}
+}