Added scale, hardcoded at 180px, displays meters

css/app.css

@@ -2209,6 +2209,20 @@ img.wiki-image {
     padding:5px;
 }
 
+#scale text {
+    font: 12px sans-serif;
+    stroke: none;
+    fill: #ccc;
+    text-anchor: start;
+}
+
+#scale path {
+    fill: none;
+    stroke: #ccc;
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+}
+
 .source-switch a {
     padding: 2px 4px 4px 4px;
     border-radius: 2px;

js/id/ui.js

@@ -85,11 +85,11 @@ iD.ui = function(context) {
 
         aboutBlock.append('div')
             .attr('id', 'scale-block')
-            .attr('class', 'col3')
+            .attr('class', 'fl')
             .call(iD.ui.Scale(context));
 
         var about = aboutBlock.append('div')
-            .attr('class', 'col9');
+            .attr('class', 'fr');
 
         about.append('div')
             .attr('class', 'api-status')

js/id/ui/scale.js

@@ -1,12 +1,51 @@
 iD.ui.Scale = function(context) {
-    var map = context.map();
+    var projection = context.projection,
+        tickHeight = 8;
+
+    // http://stackoverflow.com/a/27943/7620
+    // Haversine distance formula
+    function distance(loc1, loc2) {
+        var R = 6371009;  // Mean radius of the earth in m
+        var dLat = (loc2[1] - loc1[1]) * (Math.PI / 180);
+        var dLon = (loc2[0] - loc1[0]) * (Math.PI / 180);
+        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+            Math.cos(loc1[1] * (Math.PI / 180)) *
+            Math.cos(loc2[1] * (Math.PI / 180)) *
+            Math.sin(dLon / 2) * Math.sin(dLon / 2);
+        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+        var d = R * c;  // Distance in m
+        return d;
+    };
 
     function update(selection) {
-        selection.append('svg')
-            .attr('id', 'scale')
+        var x = 180,
+            dims = context.map().dimensions(),
+            loc1 = projection.invert([0, dims[1]]),
+            loc2 = projection.invert([x, dims[1]]),
+            dist = distance(loc1, loc2);
+
+        selection.select('#scalepath')
+            .attr('d', 'M0.5,0.5v'+ tickHeight +'h' + x + 'v-' + tickHeight);
+
+        selection.select('#scaletext')
+            .attr('x', x + 5)
+            .attr('y', tickHeight)
+            .text(String(Math.floor(dist)) + ' m');
     };
 
     return function(selection) {
+        var g = selection.append('svg')
+            .attr('id', 'scale')
+            .append('g')
+            .attr('transform', 'translate(10,' + tickHeight + ')');
+
+        g.append('path').attr('id', 'scalepath');
+        g.append('text').attr('id', 'scaletext');
+
         update(selection);
+
+        context.map().on('move.scale', function() {
+            update(selection);
+        });
     };
 };