Opacity control, layerswitcher

css/app.css

@@ -104,6 +104,32 @@ table th {
     right:0;
 }
 
+div.layerswitcher-control {
+    position:absolute;
+    top:170px;
+    left:10px;
+    color:#222;
+}
+
+div.layerswitcher-control .content {
+    background:#fff;
+    padding:5px;
+}
+
+div.layerswitcher-control div.opacity-options {
+    border:1px solid #000;
+    height:15px;
+    width:45px;
+}
+
+div.layerswitcher-control a.opacity {
+    background:#000;
+    display:inline-block;
+    width:15px;
+    height:15px;
+}
+
+
 div.geocode-control {
     position:absolute;
     top:130px;
@@ -111,7 +137,8 @@ div.geocode-control {
     color:#222;
 }
 
-#bar div.geocode-control button {
+#bar div.geocode-control button,
+div.layerswitcher-control button {
     width:40px;
 }
 
@@ -119,7 +146,8 @@ div.geocode-control input {
     display:none;
 }
 
-#bar button {
+#bar button,
+button.white {
     width:80px;
     white-space:nowrap;
     cursor:pointer;
@@ -137,7 +165,7 @@ div.geocode-control input {
 }
 
 div.buttons-joined {
-    margin:3px;
+    margin:5px;
     padding:1px;
     background:#fff;
     display:inline-block;
@@ -146,12 +174,12 @@ div.buttons-joined {
 }
 
 #bar div.buttons-joined button:first-child {
-    border-radius:3px 0 0 3px;
+    border-radius:2px 0 0 2px;
 }
 
 #bar div.buttons-joined button:last-child {
     border-right:0;
-    border-radius:0 3px 3px 0;
+    border-radius:0 2px 2px 0;
 }
 
 #bar div.buttons-joined button {

index.html

@@ -39,6 +39,7 @@
         <script src='js/id/ui/commit.js'></script>
         <script src='js/id/ui/loading.js'></script>
         <script src='js/id/ui/userpanel.js'></script>
+        <script src='js/id/ui/layerswitcher.js'></script>
 
         <script src='js/id/actions.js'></script>
         <script src='js/id/actions/add_node.js'></script>

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');
+};