Doit

index.html

@@ -113,7 +113,7 @@ Imagery <a href="http://opengeodata.org/microsoft-imagery-details">&copy; 2012</
 		width: $('#map').width(),
 		height: $('#map').height()
 	});
-    map.setZoom(14);
+    map.setZoom(16);
     map.setCentre({ lat: 38.8, lon: -77 });
 	map.ruleset = ruleset;
 

js/iD/Connection.js

@@ -109,7 +109,7 @@ iD.Connection = function(apiURL) {
         // summary:		Request data within the bbox from an external OSM server. Currently hardcoded
         // to use Overpass API (which has the relevant CORS headers).
         loadFromURL("http://www.overpass-api.de/api/xapi?map?bbox=" +
-            [box.west, box.south, box.east, box.north], callback);
+            [box[0][0], box[1][1], box[1][0], box[0][1]], callback);
     }
 
     function loadFromURL(url, callback) {

js/iD/renderer/Map.js

@@ -178,7 +178,13 @@ iD.renderer.Map.prototype = {
 
     download: function() {
         // summary:		Ask the connection to download data for the current viewport.
-        this.connection.loadFromAPI(this.extent, _.bind(this.updateUIs, this));
+        this.connection.loadFromAPI(this.extent(), _.bind(this.updateUIs, this));
+    },
+
+    extent: function() {
+        return [
+            this.projection.invert([0, 0]),
+            this.projection.invert([this.width, this.height])];
     },
 
     updateUIs: function() {

js/iD/renderer/WayUI.js

@@ -20,6 +20,7 @@ iD.renderer.WayUI.prototype = {
 		if (this.entity.isClosed()) { tags[':area']='yes'; }
 		return tags;
 	},
+
 	draw: function() {
 		// summary:		Draw the object and add hitzone sprites.
 		var way = this.entity,
@@ -32,27 +33,24 @@ iD.renderer.WayUI.prototype = {
 		var tags = this.getEnhancedTags();
 
 		// List of co-ordinates
-		var coords = _.map(way.nodes, _.bind(function(node) {
-            return {
-                x: this.map.lon2coord(node.lon),
-                y: this.map.latp2coord(node.latp)
-            };
-        }, this));
+        var proj = this.map.projection;
 
         var line = d3.svg.line()
-            .x(function(d) { return d.x; })
-            .y(function(d) { return d.y; })
+            .x(function(d) { return proj([d.lon, d.lat])[0]; })
+            .y(function(d) { return proj([d.lon, d.lat])[1]; })
             .interpolate("linear");
 
-        this.map.layers[0].casing.append("path")
-            .data([coords])
-            .attr('class', 'casing')
-            .attr("d", line);
+        this.casing = this.map.layers[0].casing.append("path")
+            .data([way.nodes])
+            .attr('class', 'casing');
 
-        this.map.layers[0].stroke.append("path")
-            .data([coords])
-            .attr('class', 'stroke')
-            .attr("d", line);
+        this.casing.attr("d", line);
+
+        this.stroke = this.map.layers[0].stroke.append("path")
+            .data([way.nodes])
+            .attr('class', 'stroke');
+
+        this.stroke.attr("d", line);
 
         return this;
 	},