Simplify layer structure

Also, always give SVG elements an explicit size -- seems
to be necessary for Firefox to render them correctly.

Fixes #1436.

css/app.css

@@ -1818,7 +1818,7 @@ img.wiki-image {
     user-select: none;
 }
 
-#surface, #layer-g, .layer-layer {
+#supersurface, #surface, .layer-layer {
     position: absolute;
     top: 0;
     left: 0;

js/id/renderer/background.js

@@ -1,6 +1,6 @@
 iD.Background = function(backgroundType) {
 
-    backgroundType = backgroundType || 'layer';
+    backgroundType = backgroundType || 'background';
 
     var tileSize = 256,
         tile = d3.geo.tile(),
@@ -49,6 +49,12 @@ iD.Background = function(backgroundType) {
 
     // Update tiles based on current state of `projection`.
     function background(selection) {
+        var layer = selection.selectAll('.' + backgroundType + '-layer')
+            .data([background]);
+
+        layer.enter().append('div')
+            .attr('class', 'layer-layer ' + backgroundType + '-layer', true);
+
         tile.scale(projection.scale() * 2 * Math.PI)
             .translate(projection.translate());
 
@@ -58,7 +64,7 @@ iD.Background = function(backgroundType) {
 
         z = Math.max(Math.log(projection.scale() * 2 * Math.PI) / Math.log(2) - 8, 0);
 
-        render(selection);
+        render(layer);
     }
 
     // Derive the tiles onscreen, remove those offscreen and position them.

js/id/renderer/localgpx.js

@@ -1,29 +1,23 @@
 iD.LocalGpx = function(context) {
-    var tileSize = 256,
-        projection,
+    var projection,
         gj = {},
         enable = true,
         size = [0, 0],
-        transformProp = iD.util.prefixCSSProperty('Transform'),
-        path = d3.geo.path().projection(projection),
-        source = d3.functor('');
+        svg;
 
     function render(selection) {
+        svg = selection.selectAll('svg')
+            .data([render]);
 
-        path.projection(projection);
-
-        var surf = selection.selectAll('svg')
-            .data(enable ? [gj] : []);
-
-        surf.exit().remove();
-
-        surf.enter()
+        svg.enter()
             .append('svg')
-            .style('position', 'absolute');
+            .attr('class', 'layer-layer gpx-layer');
 
-        var paths = surf
+        svg.style('display', enable ? 'block' : 'none');
+
+        var paths = svg
             .selectAll('path')
-            .data(function(d) { return [d]; });
+            .data([gj]);
 
         paths
             .enter()
@@ -31,7 +25,7 @@ iD.LocalGpx = function(context) {
             .attr('class', 'gpx');
 
         paths
-            .attr('d', path);
+            .attr('d', d3.geo.path().projection(projection));
     }
 
     function toDom(x) {
@@ -57,8 +51,8 @@ iD.LocalGpx = function(context) {
     };
 
     render.size = function(_) {
-        if (!arguments.length) return size;
-        size = _;
+        if (!arguments.length) return svg.size();
+        svg.size(_);
         return render;
     };
 

js/id/renderer/map.js

@@ -16,7 +16,7 @@ iD.Map = function(context) {
             iD.Background().projection(projection),
             iD.LocalGpx(context).projection(projection),
             iD.Background('overlay').projection(projection)
-            ],
+        ],
         transformProp = iD.util.prefixCSSProperty('Transform'),
         points = iD.svg.Points(roundedProjection, context),
         vertices = iD.svg.Vertices(roundedProjection, context),
@@ -25,7 +25,7 @@ iD.Map = function(context) {
         midpoints = iD.svg.Midpoints(roundedProjection, context),
         labels = iD.svg.Labels(roundedProjection, context),
         tail = iD.ui.Tail(),
-        supersurface, surface, layergroup;
+        supersurface, surface;
 
     function map(selection) {
         context.history()
@@ -40,8 +40,9 @@ iD.Map = function(context) {
         supersurface = selection.append('div')
             .attr('id', 'supersurface');
 
-        layergroup = supersurface.append('div')
-            .attr('id', 'layer-g');
+        layers.forEach(function(layer) {
+            supersurface.call(layer);
+        });
 
         surface = supersurface.append('svg')
             .on('mousedown.zoom', function() {
@@ -71,7 +72,6 @@ iD.Map = function(context) {
 
         map.size(selection.size());
         map.surface = surface;
-        map.layersurface = layergroup;
 
         labels.supersurface(supersurface);
 
@@ -202,18 +202,9 @@ iD.Map = function(context) {
         }
 
         if (!difference) {
-            var sel = layergroup
-                .selectAll('.layer-layer')
-                .data(layers);
-
-            sel.exit().remove();
-
-            sel.enter().append('div')
-                .attr('class', 'layer-layer');
-
-            sel.each(function(layer) {
-                    d3.select(this).call(layer);
-                });
+            layers.forEach(function(layer) {
+                supersurface.call(layer);
+            });
         }
 
         if (map.editable()) {
@@ -309,8 +300,8 @@ iD.Map = function(context) {
         var center = map.center();
         dimensions = _;
         surface.size(dimensions);
-        layers.map(function(l) {
-            l.size(dimensions);
+        layers.forEach(function(layer) {
+            layer.size(dimensions);
         });
         projection.clipExtent([[0, 0], dimensions]);
         setCenter(center);

js/id/ui/background.js

@@ -21,8 +21,7 @@ iD.ui.Background = function(context) {
     function background(selection) {
 
         function setOpacity(d) {
-            context.map().layersurface.selectAll('.layer-layer')
-                .filter(function(d) { return d == context.map().layers[0]; })
+            context.container().selectAll('.background-layer')
                 .transition()
                 .style('opacity', d)
                 .attr('data-opacity', d);

js/id/ui/intro.js

@@ -10,7 +10,7 @@ iD.ui.intro = function(context) {
         var history = context.history().toJSON(),
             hash = window.location.hash,
             background = context.background().source(),
-            opacity = d3.select('.layer-layer:first-child').style('opacity'),
+            opacity = d3.select('.background-layer').style('opacity'),
             loadedTiles = context.connection().loadedTiles(),
             baseEntities = context.history().graph().base().entities;
 
@@ -31,7 +31,7 @@ iD.ui.intro = function(context) {
         var beforeunload = window.onbeforeunload;
         window.onbeforeunload = null;
 
-        d3.select('.layer-layer:first-child').style('opacity', 1);
+        d3.select('.background-layer').style('opacity', 1);
 
         var curtain = d3.curtain();
         selection.call(curtain);
@@ -55,7 +55,7 @@ iD.ui.intro = function(context) {
         steps[steps.length - 1].on('startEditing', function() {
             curtain.remove();
             navwrap.remove();
-            d3.select('.layer-layer:first-child').style('opacity', opacity);
+            d3.select('.background-layer').style('opacity', opacity);
             context.connection().toggle(true).flush().loadedTiles(loadedTiles);
             context.history().reset().merge(baseEntities);
             context.background().source(background);