From c3abfa9c9afbe60b2554e96473769663debaeb74 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Wed, 7 Apr 2021 16:15:45 +0200
Subject: [PATCH] Show overpass icons in layer tree

---
 css/style.css           |  5 +++++
 js/LayersConfig.js      | 22 ++++++++++++++++------
 js/control/LayersTab.js |  4 +++-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6ca521e..de47a03 100644
--- a/css/style.css
+++ b/css/style.css
@@ -71,6 +71,11 @@ table.dataTable {
     filter: invert(1);
 }
 
+.jstree-themeicon-custom {
+    background-size: 11px !important;
+    width: 15px !important;
+}
+
 /* wrap toolbar controls */
 .leaflet-top.leaflet-left {
     bottom: 0;
diff --git a/js/LayersConfig.js b/js/LayersConfig.js
index 4a1fba9..7ef4266 100644
--- a/js/LayersConfig.js
+++ b/js/LayersConfig.js
@@ -183,15 +183,25 @@ BR.LayersConfig = L.Class.extend({
         }
     },
 
+    getOverpassIconUrl: function (icon) {
+        const iconPrefix = /^(maki|temaki|fas)-/;
+        let iconUrl = null;
+
+        if (icon && iconPrefix.test(icon)) {
+            const iconName = icon.replace(iconPrefix, '');
+            const postfix = icon.startsWith('maki-') ? '-11' : '';
+            iconUrl = `dist/images/${iconName}${postfix}.svg`;
+        }
+
+        return iconUrl;
+    },
+
     createOverpassLayer: function (query, icon) {
         let markerSign = '<i class="fa fa-search icon-white" style="width: 25px;"></i>';
 
-        if (icon && icon.startsWith('maki-')) {
-            markerSign = `<img class="icon-invert" src="dist/images/${icon.substr(5)}-11.svg" />`;
-        } else if (icon && icon.startsWith('temaki-')) {
-            markerSign = `<img class="icon-invert" src="dist/images/${icon.substr(7)}.svg" width="11" />`;
-        } else if (icon && icon.startsWith('fas-')) {
-            markerSign = `<img class="icon-invert" src="dist/images/${icon.substr(4)}.svg" width="11" />`;
+        const iconUrl = this.getOverpassIconUrl(icon);
+        if (iconUrl) {
+            markerSign = `<img class="icon-invert" src="${iconUrl}" width="11" />`;
         }
 
         return Object.assign(
diff --git a/js/control/LayersTab.js b/js/control/LayersTab.js
index 922a067..2108f62 100644
--- a/js/control/LayersTab.js
+++ b/js/control/LayersTab.js
@@ -170,7 +170,7 @@ BR.LayersTab = BR.ControlLayers.extend({
                 core: {
                     multiple: false,
                     themes: {
-                        icons: false,
+                        icons: true,
                         dots: false,
                     },
                     data: treeData,
@@ -188,6 +188,7 @@ BR.LayersTab = BR.ControlLayers.extend({
         function createRootNode(name) {
             var rootNode = {
                 text: i18next.t('sidebar.layers.category.' + name, name),
+                icon: false,
                 state: {
                     disabled: true,
                 },
@@ -218,6 +219,7 @@ BR.LayersTab = BR.ControlLayers.extend({
                 childNode = {
                     id: id,
                     text: getText(props, parent),
+                    icon: self.layersConfig.getOverpassIconUrl(props.icon) || false,
                     state: {
                         checked: self.layersConfig.isDefaultLayer(id, props.overlay),
                     },