Display simple legend next to layer title as QGIS does

assets/src/legacy/map.js

@@ -5464,6 +5464,23 @@ window.lizMap = function() {
         self.events.triggerEvent("layersadded", self);
 
 
+        // Add legends
+        const wms = new WMS();
+        const layersName = layers.map(layer => layer.params.LAYERS).join();
+        const wmsParams = {
+          LAYERS: layersName,
+        };
+
+        wms.getLegendGraphics(wmsParams).then(response => {
+          const treeviewLayers = document.querySelectorAll('.liz-layer');
+          treeviewLayers.forEach((treeviewLayer, index) => {
+            const icon = response.nodes[index].icon;
+            if(icon){
+              treeviewLayer.querySelector('button').insertAdjacentHTML('afterend',`<img class="legend" src="data:image/png;base64, ${icon}">`);
+            }
+          });
+        });
+
         // Verifying z-index
         var lastLayerZIndex = map.layers[map.layers.length - 1].getZIndex();
         if (lastLayerZIndex > map.Z_INDEX_BASE['Feature'] - 100) {

assets/src/modules/WMS.js

@@ -10,6 +10,15 @@ export default class WMS {
             SRS: 'EPSG:4326',
             INFO_FORMAT: 'text/html'
         };
+
+        this._defaultGetLegendGraphicsParameters = {
+            repository: lizUrls.params.repository,
+            project: lizUrls.params.project,
+            SERVICE: 'WMS',
+            REQUEST: 'GetLegendGraphics',
+            VERSION: '1.3.0',
+            FORMAT: 'application/json',
+        };
     }
 
     /**
@@ -27,4 +36,20 @@ export default class WMS {
         });
         return await response.text();
     }
+
+    /**
+     * @param {Object} options - optional parameters which can override this._defaultGetLegendGraphicsParameters
+     * @return {Promise} Promise object represents data
+     * @memberof WMS
+     */
+    async getLegendGraphics(options) {
+        const response = await fetch(lizUrls.wms, {
+            method: "POST",
+            body: new URLSearchParams({
+                ...this._defaultGetLegendGraphicsParameters,
+                ...options
+            })
+        });
+        return await response.json();
+    }
 }

lizmap/www/assets/css/map.css

@@ -1663,6 +1663,9 @@ lizmap-print .flex {
   position: relative;
   max-width: none;
 }
+#switcher img.legend {
+  margin-left: 5px;
+}
 #switcher .treeTable td a.expander {
   font-size : 1em;
 }