Add clipping back

js/id/id.js

@@ -198,7 +198,8 @@ window.iD = function () {
     function rawMercator() {
         var project = d3.geo.mercator.raw,
             k = 512 / Math.PI, // scale
-            x = 0, y = 0; // translate
+            x = 0, y = 0, // translate
+            clipExtent = [[0, 0], [0, 0]];
 
         function projection(point) {
             point = project(point[0] * Math.PI / 180, point[1] * Math.PI / 180);
@@ -223,6 +224,12 @@ window.iD = function () {
             return projection;
         };
 
+        projection.clipExtent = function(_) {
+            if (!arguments.length) return clipExtent;
+            clipExtent = _;
+            return projection;
+        };
+
         projection.stream = d3.geo.transform({
             point: function(x, y) {
                 x = projection([x, y]);

js/id/renderer/map.js

@@ -317,7 +317,7 @@ iD.Map = function(context) {
         dimensions = _;
         surface.dimensions(dimensions);
         context.background().dimensions(dimensions);
-//        projection.clipExtent([[0, 0], dimensions]);
+        projection.clipExtent([[0, 0], dimensions]);
         mouse = iD.util.fastMouse(supersurface.node());
         setCenter(center);
         return redraw();

js/id/svg.js

@@ -22,9 +22,10 @@ iD.svg = {
     Path: function(projection, graph, polygon) {
         var cache = {},
             round = iD.svg.Round().stream,
+            clip = d3.geo.clipExtent().extent(projection.clipExtent()).stream,
             project = projection.stream,
             path = d3.geo.path()
-                .projection({stream: function(output) { return project(round(output)); }});
+                .projection({stream: function(output) { return polygon ? project(round(output)) : project(clip(round(output))); }});
 
         return function(entity) {
             if (entity.id in cache) {