From 9974aae30b7c0ea5379887bfbd4dc05b21024bae Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Thu, 12 May 2016 09:50:43 -0400
Subject: [PATCH] Clicking on scale bar will toggle units from imperial/metric
 (re: #2351)

---
 css/app.css       |  8 ++++++++
 js/id/ui/scale.js | 11 +++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/css/app.css b/css/app.css
index 67d0e7f0c..feaddb8b9 100644
--- a/css/app.css
+++ b/css/app.css
@@ -2434,6 +2434,10 @@ div.full-screen > button:hover {
     max-height: 30px;
     float: left;
     clear: left;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 #info-block {
@@ -2446,6 +2450,10 @@ div.full-screen > button:hover {
     width: 100%;
 }
 
+#scale:hover {
+    cursor: pointer;
+}
+
 #scale text {
     font: 12px sans-serif;
     stroke: none;
diff --git a/js/id/ui/scale.js b/js/id/ui/scale.js
index f49f2ee36..35122d73a 100644
--- a/js/id/ui/scale.js
+++ b/js/id/ui/scale.js
@@ -1,11 +1,11 @@
 iD.ui.Scale = function(context) {
     var projection = context.projection,
+        imperial = (iD.detect().locale.toLowerCase() === 'en-us'),
         maxLength = 180,
         tickHeight = 8;
 
     function scaleDefs(loc1, loc2) {
         var lat = (loc2[1] + loc1[1]) / 2,
-            imperial = (iD.detect().locale.toLowerCase() === 'en-us'),
             conversion = (imperial ? 3.28084 : 1),
             dist = iD.geo.lonToMeters(loc2[0] - loc1[0], lat) * conversion,
             scale = { dist: 0, px: 0, text: '' },
@@ -64,16 +64,23 @@ iD.ui.Scale = function(context) {
             .text(scale.text);
     }
 
+
     return function(selection) {
+        function switchUnits() {
+            imperial = !imperial;
+            selection.call(update);
+        }
+
         var g = selection.append('svg')
             .attr('id', 'scale')
+            .on('click', switchUnits)
             .append('g')
             .attr('transform', 'translate(10,11)');
 
         g.append('path').attr('id', 'scalepath');
         g.append('text').attr('id', 'scaletext');
 
-        update(selection);
+        selection.call(update);
 
         context.map().on('move.scale', function() {
             update(selection);