diff --git a/css/app.css b/css/app.css
index c9e8220e2..b263dd5ad 100644
--- a/css/app.css
+++ b/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 {
diff --git a/index.html b/index.html
index 75f8e1123..c468ca7a0 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,7 @@
+
diff --git a/js/id/id.js b/js/id/id.js
index f98c28f9f..bd314bed8 100644
--- a/js/id/id.js
+++ b/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');
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 0f359fe16..fcad51151 100644
--- a/js/id/renderer/map.js
+++ b/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')
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
new file mode 100644
index 000000000..9f8609bd5
--- /dev/null
+++ b/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');
+};