Show overpass icons in layer tree

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;

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-')) {
+        const iconUrl = this.getOverpassIconUrl(icon);
-            markerSign = `<img class="icon-invert" src="dist/images/${icon.substr(5)}-11.svg" />`;
+        if (iconUrl) {
-        } else if (icon && icon.startsWith('temaki-')) {
+            markerSign = `<img class="icon-invert" src="${iconUrl}" width="11" />`;
-            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" />`;
         }
 
         return Object.assign(

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),
                     },