From e50b0962798e9bfceeb414e7fb91fb2139bd3d6c Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Mon, 28 Sep 2020 16:22:42 -0400
Subject: [PATCH] Show distance in measurement panel when two nodes are
 selected (close #7952)

---
 data/core.yaml                   |  1 +
 dist/locales/en.json             |  1 +
 modules/ui/panels/measurement.js | 20 +++++++++++++++++---
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index e7c018948..c93b25873 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -622,6 +622,7 @@ en:
       center: Center
       perimeter: Perimeter
       length: Length
+      distance: Distance
       area: Area
       centroid: Centroid
       location: Location
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 00edc8a7e..a439359d6 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -805,6 +805,7 @@
                 "center": "Center",
                 "perimeter": "Perimeter",
                 "length": "Length",
+                "distance": "Distance",
                 "area": "Area",
                 "centroid": "Centroid",
                 "location": "Location",
diff --git a/modules/ui/panels/measurement.js b/modules/ui/panels/measurement.js
index 2737786ce..f1b01e403 100644
--- a/modules/ui/panels/measurement.js
+++ b/modules/ui/panels/measurement.js
@@ -7,7 +7,7 @@ import {
 
 import { t, localizer } from '../../core/localizer';
 import { displayArea, displayLength, decimalCoordinatePair, dmsCoordinatePair } from '../../util/units';
-import { geoExtent } from '../../geo';
+import { geoExtent, geoSphericalDistance } from '../../geo';
 import { services } from '../../services';
 import { utilGetAllNodes } from '../../util';
 
@@ -48,7 +48,7 @@ export function uiPanelMeasurement(context) {
         var heading;
         var center, location, centroid;
         var closed, geometry;
-        var totalNodeCount, length = 0, area = 0;
+        var totalNodeCount, length = 0, area = 0, distance;
 
         if (selectedNoteID && osm) {       // selected 1 note
 
@@ -92,6 +92,12 @@ export function uiPanelMeasurement(context) {
                     centroid = null;
                 }
 
+                if (selected.length === 2 &&
+                    selected[0].type === 'node' &&
+                    selected[1].type === 'node') {
+                    distance = geoSphericalDistance(selected[0].loc, selected[1].loc);
+                }
+
                 if (selected.length === 1 && selected[0].type === 'node') {
                     location = selected[0].loc;
                 } else {
@@ -151,6 +157,14 @@ export function uiPanelMeasurement(context) {
                 .html(displayLength(length, isImperial));
         }
 
+        if (typeof distance === 'number') {
+            list
+                .append('li')
+                .html(t.html('info_panels.measurement.distance') + ':')
+                .append('span')
+                .html(displayLength(distance, isImperial));
+        }
+
         if (location) {
             coordItem = list
                 .append('li')
@@ -181,7 +195,7 @@ export function uiPanelMeasurement(context) {
                 .html(decimalCoordinatePair(center));
         }
 
-        if (length || area) {
+        if (length || area || typeof distance === 'number') {
             var toggle  = isImperial ? 'imperial' : 'metric';
             selection
                 .append('a')