Opacity control, layerswitcher

js/id/id.js

@@ -117,12 +117,13 @@ window.iD = function(container) {
 
         var gc = bar.append('div').attr('class', 'geocode-control');
         gc.append('button').text('?');
-        gc.on('mouseover', function() {
-            d3.select('.geocode-control input').style('display', 'inline-block');
-        });
-        gc.on('mouseout', function() {
-            d3.select('.geocode-control input').style('display', 'none');
-        });
+        gc
+            .on('mouseover', function() {
+                d3.select('.geocode-control input').style('display', 'inline-block');
+            })
+            .on('mouseout', function() {
+                d3.select('.geocode-control input').style('display', 'none');
+            });
         gc.append('input')
             .attr({
                 type: 'text',
@@ -137,6 +138,9 @@ window.iD = function(container) {
                 });
             });
 
+        this.append('div').attr('class', 'layerswitcher-control')
+            .call(iD.layerswitcher(map));
+
         this.append('div')
             .attr('class', 'inspector-wrap')
             .style('display', 'none');

js/id/renderer/map.js

@@ -72,6 +72,7 @@ iD.Map = function() {
                 .attr({ x: 0, y: 0 });
 
         tilegroup = surface.append('g')
+            .attr('id', 'tile-g')
             .attr('clip-path', 'url(#clip)');
 
         r = surface.append('g')

js/id/ui/layerswitcher.js

@@ -0,0 +1,46 @@
+iD.layerswitcher = function(map) {
+    var event = d3.dispatch('cancel', 'save');
+    var sources = [{
+        name: 'Bing',
+        source: iD.BackgroundSource.Bing
+    }];
+
+    var opacities = [1, 0.5, 0];
+
+    function layerswitcher(selection) {
+        selection
+            .append('button')
+            .attr('class', 'white')
+            .text('L');
+
+        var content = selection
+            .append('div').attr('class', 'content');
+
+        var opa = content.append('div')
+            .attr('class', 'opacity-options')
+            .selectAll('a.opacity')
+            .data(opacities)
+            .enter()
+            .append('a').attr('class', 'opacity')
+            .style('opacity', function(d) {
+                return d;
+            })
+            .on('click', function(d) {
+                d3.select('#tile-g')
+                    .transition()
+                    .style('opacity', d);
+            });
+
+        var s = content.selectAll('a.layer')
+            .data(sources);
+
+        s.enter()
+            .append('a')
+            .attr('class', 'layer')
+            .text(function(d) {
+                return d.name;
+            });
+    }
+
+    return d3.rebind(layerswitcher, event, 'on');
+};