⭐ for "best" imagery

(closes #2902)

css/app.css

@@ -1759,6 +1759,10 @@ div.full-screen > button:hover {
     border: 1px solid #CCC;
 }
 
+.imagery-faq {
+  margin-bottom: 10px;
+}
+
 .background-control .adjustments button:last-child {
     border: 0;
 }
@@ -1805,6 +1809,20 @@ div.full-screen > button:hover {
     background: #E8EBFF;
 }
 
+.layer-list li.best > div {
+    display: inline-block;
+    height: 100%;
+    width: 10%;
+    padding: 5px 0;
+    float: right;
+}
+
+.layer-list li.best > div > span {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
 .layer-list label {
     display: block;
     padding: 5px 10px;

data/core.yaml

@@ -268,10 +268,13 @@ en:
     description: Background settings
     percent_brightness: "{opacity}% brightness"
     none: None
+    best_imagery: Best known imagery source for this location
     custom: Custom
     custom_button: Edit custom background
     custom_prompt: "Enter a tile URL template. Valid tokens are {z}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme."
     fix_misalignment: Fix alignment
+    imagery_source_faq: Where does this imagery come from?
+    imagery_source_faq_link: https://github.com/openstreetmap/iD/blob/master/FAQ.md#how-can-i-report-an-issue-with-background-imagery
     reset: reset
     minimap:
       description: Minimap

dist/locales/en.json

@@ -324,10 +324,13 @@
         "description": "Background settings",
         "percent_brightness": "{opacity}% brightness",
         "none": "None",
+        "best_imagery": "Best known imagery source for this location",
         "custom": "Custom",
         "custom_button": "Edit custom background",
         "custom_prompt": "Enter a tile URL template. Valid tokens are {z}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme.",
         "fix_misalignment": "Fix alignment",
+        "imagery_source_faq": "Where does this imagery come from?",
+        "imagery_source_faq_link": "https://github.com/openstreetmap/iD/blob/master/FAQ.md#how-can-i-report-an-issue-with-background-imagery",
         "reset": "reset",
         "minimap": {
             "description": "Minimap",

js/id/ui/background.js

@@ -92,7 +92,8 @@ iD.ui.Background = function(context) {
 
             var enter = layerLinks.enter()
                 .insert('li', '.custom_layer')
-                .attr('class', 'layer');
+                .attr('class', 'layer')
+                .classed('best', function(d) { return d.best(); });
 
             // only set tooltips for layers with tooltips
             enter.filter(function(d) { return d.description; })
@@ -100,6 +101,14 @@ iD.ui.Background = function(context) {
                     .title(function(d) { return d.description; })
                     .placement('top'));
 
+            enter.filter(function(d) { return d.best(); })
+                .append('div')
+                .call(bootstrap.tooltip()
+                    .title(t('background.best_imagery'))
+                    .placement('left'))
+                .append('span')
+                .html(' ★');
+
             var label = enter.append('label');
 
             label.append('input')
@@ -253,6 +262,16 @@ iD.ui.Background = function(context) {
         label.append('span')
             .text(t('background.custom'));
 
+        content.append('div')
+          .attr('class', 'imagery-faq')
+          .append('a')
+          .attr('target', '_blank')
+          .attr('tabindex', -1)
+          .call(iD.svg.Icon('#icon-out-link', 'inline'))
+          .attr('href', t('background.imagery_source_faq_link'))
+          .append('span')
+          .text(t('background.imagery_source_faq'));
+
         var overlayList = content.append('ul')
             .attr('class', 'layer-list');