Show attribution for overlay layers (fixes #1909)

css/app.css

@@ -2209,12 +2209,24 @@ img.wiki-image {
 }
 
 /* Attribution overlay */
-.attribution {
+.base-layer-attribution,
+.overlay-layer-attribution {
     position: absolute;
     bottom: 35px;
-    left:10px;
-    color:#888;
-    font-size:10px;
+    color: #888;
+    font-size: 10px;
+}
+
+.base-layer-attribution {
+    left: 10px;
+}
+
+.overlay-layer-attribution {
+    right: 10px;
+}
+
+.overlay-layer-attribution .attribution:not(:last-child):after {
+    content: '; ';
 }
 
 .source-image {

js/id/renderer/background.js

@@ -170,6 +170,10 @@ iD.Background = function(context) {
             overlayLayers.some(function(l) { return l.source() === d; });
     };
 
+    background.overlayLayerSources = function() {
+        return overlayLayers.map(function (l) { return l.source(); });
+    };
+
     background.toggleOverlayLayer = function(d) {
         var layer;
 

js/id/ui.js

@@ -51,9 +51,7 @@ iD.ui = function(context) {
             .attr('class', 'spinner')
             .call(iD.ui.Spinner(context));
 
-        content.append('div')
-            .attr('class', 'attribution')
-            .attr('tabindex', -1)
+        content
             .call(iD.ui.Attribution(context));
 
         content.append('div')

js/id/ui/attribution.js

@@ -1,18 +1,20 @@
 iD.ui.Attribution = function(context) {
     var selection;
 
-    function update() {
-        if (!context.background().baseLayerSource()) {
-            selection.html('');
-            return;
-        }
+    function attribution(data, klass) {
+        var div = selection.selectAll('.' + klass)
+            .data([0]);
 
-        var attribution = selection.selectAll('.provided-by')
-            .data([context.background().baseLayerSource()], function(d) { return d.name; });
+        div.enter()
+            .append('div')
+            .attr('class', klass);
 
-        attribution.enter()
+        var background = div.selectAll('.attribution')
+            .data(data, function(d) { return d.name; });
+
+        background.enter()
             .append('span')
-            .attr('class', 'provided-by')
+            .attr('class', 'attribution')
             .each(function(d) {
                 var source = d.terms_text || d.id || d.name;
 
@@ -32,10 +34,10 @@ iD.ui.Attribution = function(context) {
                 }
             });
 
-        attribution.exit()
+        background.exit()
             .remove();
 
-        var copyright = attribution.selectAll('.copyright-notice')
+        var copyright = background.selectAll('.copyright-notice')
             .data(function(d) {
                 var notice = d.copyrightNotices(context.map().zoom(), context.map().extent());
                 return notice ? [notice] : [];
@@ -51,6 +53,13 @@ iD.ui.Attribution = function(context) {
             .remove();
     }
 
+    function update() {
+        attribution([context.background().baseLayerSource()], 'base-layer-attribution');
+        attribution(context.background().overlayLayerSources().filter(function (s) {
+            return s.validZoom(context.map().zoom());
+        }), 'overlay-layer-attribution');
+    }
+
     return function(select) {
         selection = select;