Display logos for name-suggestion-index brands in the sidebar (close #5167)

build_data.js

@@ -13,7 +13,8 @@ const YAML = require('js-yaml');
 
 const fieldSchema = require('./data/presets/schema/field.json');
 const presetSchema = require('./data/presets/schema/preset.json');
-const suggestions = require('name-suggestion-index').brands.brands;
+const suggestionBrands = require('name-suggestion-index').brands.brands;
+const nameSuggestionsWikidata = require('name-suggestion-index').wikidata.wikidata;
 const deprecated = require('./data/deprecated.json').dataDeprecated;
 
 // fontawesome icons
@@ -194,8 +195,8 @@ function generateFields(tstrings, faIcons) {
 
 function suggestionsToPresets(presets) {
 
-    Object.keys(suggestions).forEach(k => {
-        const suggestion = suggestions[k];
+    Object.keys(suggestionBrands).forEach(k => {
+        const suggestion = suggestionBrands[k];
         const qid = suggestion.tags['brand:wikidata'];
         if (!qid || !/^Q\d+$/.test(qid)) return;   // wikidata tag missing or looks wrong..
 
@@ -235,9 +236,17 @@ function suggestionsToPresets(presets) {
         let wikidataTag = { 'brand:wikidata': qid };
         let suggestionID = presetID + '/' + name;
 
+        let logoURL;
+
+        let logoURLs = nameSuggestionsWikidata[qid] && nameSuggestionsWikidata[qid].logos;
+        if (logoURLs) {
+            logoURL = logoURLs.facebook || logoURLs.twitter || logoURLs.wikidata;
+        }
+
         presets[suggestionID] = {
             name: name,
             icon: preset.icon,
+            imageURL: logoURL,
             geometry: preset.geometry,
             tags: Object.assign({}, preset.tags, wikidataTag),
             addTags: suggestion.tags,

css/80_app.css

@@ -1156,25 +1156,18 @@ a.hide-toggle {
 
 .preset-list-button-wrap {
     position: relative;
-    height: 60px;
+    height: 62px;
     display: flex;
+    border: 1px solid #ccc;
+    border-radius: 4px;
 }
 
 .preset-list-button {
     width: 100%;
     height: 100%;
     position: relative;
-    border: 1px solid #ccc;
     display: flex;
 }
-[dir='ltr'] .preset-list-button-wrap:not(.category) .preset-list-button {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-[dir='rtl'] .preset-list-button-wrap:not(.category) .preset-list-button {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
 
 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
     background: #ececec;
@@ -1185,12 +1178,21 @@ a.hide-toggle {
     width: 60px;
     height: 60px;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 .preset-icon-container.small {
     width: 40px;
     height: 40px;
     flex: 0 0 auto;
 }
+.preset-icon-container img.image-icon {
+    width: 50px;
+    height: 50px;
+    object-fit: contain;
+    border-radius: 2px;
+}
 
 .preset-icon-point-border path {
     stroke: #333;
@@ -1343,20 +1345,17 @@ a.hide-toggle {
 .preset-list-item button.preset-favorite-button,
 .preset-list-item button.tag-reference-button {
     height: 100%;
-    border: 1px solid #ccc;
     width: 32px;
     flex: 0 0 auto;
     background: #f6f6f6;
 }
 [dir='ltr'] .preset-list-item button.preset-favorite-button,
 [dir='ltr'] .preset-list-item button.tag-reference-button {
-    border-left: none;
-    border-radius: 0;
+    border-left: 1px solid #ccc;
 }
 [dir='rtl'] .preset-list-item button.preset-favorite-button,
 [dir='rtl'] .preset-list-item button.tag-reference-button {
-    border-right: none;
-    border-radius: 0;
+    border-right: 1px solid #ccc;
 }
 [dir='ltr'] .preset-list-item button:last-child {
     border-radius: 0 4px 4px 0;

data/presets/schema/preset.json

@@ -59,6 +59,10 @@
             "description": "Name of preset icon which represents this preset",
             "type": "string"
         },
+        "imageURL": {
+            "description": "The URL of a remote image that is more specific than 'icon'",
+            "type": "string"
+        },
         "terms": {
             "description": "English synonyms or related terms",
             "type": "array",

data/taginfo.json

@@ -1713,6 +1713,7 @@
     {"key": "man_made", "value": "MDF", "description": "🄳 ➜ telecom=exchange"},
     {"key": "man_made", "value": "water_tank", "description": "🄳 ➜ man_made=storage_tank + content=water"},
     {"key": "man_made", "value": "well", "description": "🄳 ➜ man_made=water_well"},
+    {"key": "memorial", "value": "plate", "description": "🄳 ➜ memorial=plaque"},
     {"key": "mining_resource", "description": "🄳 ➜ resource=*"},
     {"key": "natural", "value": "marsh", "description": "🄳 ➜ natural=wetland + wetland=marsh"},
     {"key": "natural", "value": "waterfall", "description": "🄳 ➜ waterway=waterfall"},

modules/ui/preset_icon.js

@@ -139,6 +139,31 @@ export function uiPresetIcon() {
 
 
     function render() {
+
+        var p = preset.apply(this, arguments);
+        var isFallback = isSmall() && p.isFallback && p.isFallback();
+        var geom = geometry ? geometry.apply(this, arguments) : null;
+        var imageURL = p.imageURL;
+        var picon = imageURL ? null : getIcon(p, geom);
+        var isMaki = picon && /^maki-/.test(picon);
+        var isTemaki = picon && /^temaki-/.test(picon);
+        var isFa = picon && /^fa[srb]-/.test(picon);
+        var isiDIcon = picon && !(isMaki || isTemaki || isFa);
+        var isCategory = !p.setTags;
+        var drawPoint = picon && geom === 'point' && isSmall() && !isFallback;
+        var drawVertex = picon && geom === 'vertex' && !isFallback;
+        var drawLine = picon && geom === 'line' && !isFallback && !isCategory;
+        var drawArea = picon && geom === 'area' && !isFallback;
+        var isFramed = (drawVertex || drawArea || drawLine);
+
+        var tags = !isCategory ? p.setTags({}, geom) : {};
+        for (var k in tags) {
+            if (tags[k] === '*') {
+                tags[k] = 'yes';
+            }
+        }
+        var tagClasses = svgTagClasses().getClassesString(tags, '');
+
         var selection = d3_select(this);
 
         var container = selection.selectAll('.preset-icon-container')
@@ -149,30 +174,21 @@ export function uiPresetIcon() {
             .attr('class', 'preset-icon-container ' + sizeClass)
             .merge(container);
 
-        var p = preset.apply(this, arguments);
-        var isFallback = isSmall() && p.isFallback && p.isFallback();
-        var geom = geometry ? geometry.apply(this, arguments) : null;
-        var picon = getIcon(p, geom);
-        var isMaki = /^maki-/.test(picon);
-        var isTemaki = /^temaki-/.test(picon);
-        var isFa = /^fa[srb]-/.test(picon);
-        var isiDIcon = !(isMaki || isTemaki || isFa);
-        var isCategory = !p.setTags;
-        var drawPoint = geom === 'point' && isSmall() && !isFallback;
-        var drawVertex = geom === 'vertex' && !isFallback;
-        var drawLine = geom === 'line' && !isFallback && !isCategory;
-        var drawArea = geom === 'area' && !isFallback;
-        var isFramed = (drawVertex || drawArea || drawLine);
-
         container.classed('fallback', isFallback);
 
-        var tags = !isCategory ? p.setTags({}, geom) : {};
-        for (var k in tags) {
-            if (tags[k] === '*') {
-                tags[k] = 'yes';
-            }
-        }
-        var tagClasses = svgTagClasses().getClassesString(tags, '');
+        var imageIcon = container.selectAll('img.image-icon')
+            .data(imageURL ? [0] : []);
+
+        imageIcon.exit()
+            .remove();
+
+        imageIcon = imageIcon.enter()
+            .append('img')
+            .attr('class', 'image-icon')
+            .merge(imageIcon);
+
+        imageIcon
+            .attr('src', imageURL);
 
         var pointBorder = container.selectAll('.preset-icon-point-border')
             .data(drawPoint ? [0] : []);
@@ -230,7 +246,10 @@ export function uiPresetIcon() {
 
 
         var icon = container.selectAll('.preset-icon')
-            .data([0]);
+            .data(picon ? [0] : []);
+
+        icon.exit()
+            .remove();
 
         icon = icon.enter()
             .append('div')