diff --git a/index.html b/index.html
index 684a1021c..13b7350c1 100644
--- a/index.html
+++ b/index.html
@@ -42,8 +42,9 @@
         <script src="js/id/svg/lines.js"></script>
         <script src="js/id/svg/midpoints.js"></script>
         <script src="js/id/svg/points.js"></script>
-        <script src="js/id/svg/vertices.js"></script>
+        <script src="js/id/svg/surface.js"></script>
         <script src="js/id/svg/tag_classes.js"></script>
+        <script src="js/id/svg/vertices.js"></script>
 
         <script src='js/id/ui/inspector.js'></script>
         <script src='js/id/ui/modal.js'></script>
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 0b748af92..5ebc88ca5 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -41,23 +41,8 @@ iD.Map = function() {
                 if (d3.event.button == 2) {
                     d3.event.stopPropagation();
                 }
-            });
-
-        surface.append('defs')
-            .append('clipPath')
-                .attr('id', 'clip')
-            .append('rect')
-                .attr('id', 'clip-rect')
-                .attr({ x: 0, y: 0 });
-
-        var clip = surface.append('g')
-            .attr('clip-path', 'url(#clip)');
-
-        var layers = clip.selectAll('.layer')
-            .data(['fill', 'casing', 'stroke', 'text', 'hit']);
-
-        layers.enter().append('g')
-            .attr('class', function(d) { return 'layer layer-' + d; });
+            })
+            .call(iD.svg.Surface());
 
         map.size(selection.size());
         map.surface = surface;
diff --git a/js/id/svg/surface.js b/js/id/svg/surface.js
new file mode 100644
index 000000000..5c19a0c65
--- /dev/null
+++ b/js/id/svg/surface.js
@@ -0,0 +1,19 @@
+iD.svg.Surface = function() {
+    return function(selection) {
+        selection.append('defs')
+            .append('clipPath')
+                .attr('id', 'clip')
+            .append('rect')
+                .attr('id', 'clip-rect')
+                .attr({ x: 0, y: 0 });
+
+        var clip = selection.append('g')
+            .attr('clip-path', 'url(#clip)');
+
+        var layers = clip.selectAll('.layer')
+            .data(['fill', 'casing', 'stroke', 'text', 'hit']);
+
+        layers.enter().append('g')
+            .attr('class', function(d) { return 'layer layer-' + d; });
+    };
+};
diff --git a/test/index.html b/test/index.html
index f029a371a..357961933 100644
--- a/test/index.html
+++ b/test/index.html
@@ -44,8 +44,9 @@
     <script src="../js/id/svg/lines.js"></script>
     <script src="../js/id/svg/midpoints.js"></script>
     <script src="../js/id/svg/points.js"></script>
-    <script src="../js/id/svg/vertices.js"></script>
+    <script src="../js/id/svg/surface.js"></script>
     <script src="../js/id/svg/tag_classes.js"></script>
+    <script src="../js/id/svg/vertices.js"></script>
 
     <script src='../js/id/ui/inspector.js'></script>
     <script src='../js/id/ui/commit.js'></script>
diff --git a/test/spec/svg/areas.js b/test/spec/svg/areas.js
index ebb16dd4d..54a7c1d35 100644
--- a/test/spec/svg/areas.js
+++ b/test/spec/svg/areas.js
@@ -4,10 +4,8 @@ describe("iD.svg.Areas", function () {
         filter = d3.functor(true);
 
     beforeEach(function () {
-        surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
-
-        surface.append('g')
-            .attr('class', 'layer-fill');
+        surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
+            .call(iD.svg.Surface());
     });
 
     it("adds tag classes", function () {
diff --git a/test/spec/svg/points.js b/test/spec/svg/points.js
index 18a2cf359..664f88a80 100644
--- a/test/spec/svg/points.js
+++ b/test/spec/svg/points.js
@@ -4,10 +4,8 @@ describe("iD.svg.Points", function () {
         filter = d3.functor(true);
 
     beforeEach(function () {
-        surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
-
-        surface.append('g')
-            .attr('class', 'layer-hit');
+        surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
+            .call(iD.svg.Surface());
     });
 
     it("adds tag classes", function () {
diff --git a/test/spec/svg/vertices.js b/test/spec/svg/vertices.js
index 4977f3e52..760734053 100644
--- a/test/spec/svg/vertices.js
+++ b/test/spec/svg/vertices.js
@@ -4,10 +4,8 @@ describe("iD.svg.Vertices", function () {
         filter = d3.functor(true);
 
     beforeEach(function () {
-        surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
-
-        surface.append('g')
-            .attr('class', 'layer-hit');
+        surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
+            .call(iD.svg.Surface());
     });
 
     it("adds tag classes", function () {