Add osm mapnik, setup toggling a bit.

css/app.css

@@ -111,9 +111,17 @@ div.layerswitcher-control {
     color:#222;
 }
 
+div.hide {
+    display:none;
+}
+
 div.layerswitcher-control .content {
     background:#fff;
     padding:5px;
+    position:absolute;
+    left:40px;
+    width:100px;
+    top:0;
 }
 
 div.layerswitcher-control div.opacity-options {
@@ -329,7 +337,7 @@ div.typeahead a {
     display:block;
 }
 
-div.typeahead a.active {
+a.selected {
     background:#DDE4FF;
 }
 

js/id/renderer/background.js

@@ -95,3 +95,7 @@ iD.BackgroundSource.Bing = iD.BackgroundSource.template(
 iD.BackgroundSource.Tiger2012 = iD.BackgroundSource.template(
     'http://{t}.tile.openstreetmap.us/tiger2012_roads_expanded/{z}/{x}/{y}.png',
     ['a', 'b', 'c']);
+
+iD.BackgroundSource.OSM = iD.BackgroundSource.template(
+    'http://{t}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    ['a', 'b', 'c']);

js/id/ui/layerswitcher.js

@@ -6,6 +6,9 @@ iD.layerswitcher = function(map) {
         }, {
             name: 'TIGER 2012',
             source: iD.BackgroundSource.Tiger2012
+        }, {
+            name: 'OSM',
+            source: iD.BackgroundSource.OSM
         }],
         opacities = [1, 0.5, 0];
 
@@ -13,10 +16,15 @@ iD.layerswitcher = function(map) {
         selection
             .append('button')
             .attr('class', 'white')
-            .text('L');
+            .text('L')
+            .on('click', function() {
+                content.classed('hide', function() {
+                    return !content.classed('hide');
+                });
+            });
 
         var content = selection
-            .append('div').attr('class', 'content');
+            .append('div').attr('class', 'content hide');
 
         opa = content.append('div')
             .attr('class', 'opacity-options')
@@ -33,18 +41,29 @@ iD.layerswitcher = function(map) {
                     .style('opacity', d);
             });
 
+        function selectLayer(d) {
+            content.selectAll('a.layer')
+                .classed('selected', function(d) {
+                    return d.source === map.background.source();
+                });
+        }
+
         content.selectAll('a.layer')
             .data(sources)
             .enter()
             .append('a')
+            .attr('href', '#')
             .attr('class', 'layer')
             .text(function(d) {
                 return d.name;
             })
             .on('click', function(d) {
+                d3.event.preventDefault();
                 map.background.source(d.source);
                 map.redraw();
+                selectLayer(d);
             });
+        selectLayer(map.background.source());
     }
 
     return d3.rebind(layerswitcher, event, 'on');

js/lib/d3.typeahead.js

@@ -35,12 +35,12 @@ d3.typeahead = function() {
             if (d3.event.keyCode === 40) idx++;
             if (d3.event.keyCode === 38) idx--;
             if (d3.event.keyCode === 13) {
-                selection.property('value', container.select('a.active').datum().value);
+                selection.property('value', container.select('a.selected').datum().value);
                 hide();
             }
             container
                 .selectAll('a')
-                .classed('active', function(d, i) { return i == idx; });
+                .classed('selected', function(d, i) { return i == idx; });
             // if (d3.event.keyCode === 13) // return
             data(selection, function(data) {
                 var val = selection.property('value'),