diff --git a/css/app.css b/css/app.css index 609ced9f3..76f0604c8 100644 --- a/css/app.css +++ b/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 { diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js index 06d0136e6..16afb82ed 100644 --- a/js/id/renderer/background.js +++ b/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; diff --git a/js/id/ui.js b/js/id/ui.js index 7b7f01714..1f8ec3da1 100644 --- a/js/id/ui.js +++ b/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') diff --git a/js/id/ui/attribution.js b/js/id/ui/attribution.js index cfa912131..f8dd6bee4 100644 --- a/js/id/ui/attribution.js +++ b/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;