Fix #5934: Display legend for external WMS layers

assets/src/modules/WMS.js

@@ -86,4 +86,29 @@ export default class WMS {
             body: params,
         });
     }
+
+    /**
+     * Get legend graphic as PNG image URL from WMS
+     * @param {object} options - optional parameters which can override this._defaultGetLegendGraphicsParameters
+     * @returns {string} PNG image URL
+     * @memberof WMS
+     */
+    getLegendGraphicPNG(options) {
+        const layers = options['LAYERS'] ?? options['LAYER'];
+        // Check if layer is specified
+        if (!layers) {
+            throw new RequestError(
+                'LAYERS or LAYER parameter is required for getLegendGraphic request',
+                options,
+            );
+        }
+
+        const params = new URLSearchParams({
+            ...this._defaultGetLegendGraphicParameters,
+            ...options,
+            FORMAT: 'image/png' // Force PNG format for external WMS layers
+        });
+
+        return `${globalThis['lizUrls'].wms}?${params}`;
+    }
 }

assets/src/modules/action/Symbology.js

@@ -32,21 +32,60 @@ export async function updateLayerTreeLayersSymbology(treeLayers, method=HttpRequ
 
     if (method.toUpperCase() == HttpRequestMethods.GET) {
         for (const treeLayer of treeLayers) {
-            const wmsParams = {
-                LAYER: treeLayer.wmsName,
-                STYLES: treeLayer.wmsSelectedStyleName,
-            };
+            // Check if this is an external WMS layer using the backend flag
+            const layerCfg = treeLayer._mapItemState?._layerItemState?._layerTreeItemCfg?._layerCfg;
+            const isExternalWMS = layerCfg?._externalWmsToggle === true
+                               || layerCfg?._externalWmsToggle === 'True';
 
-            await wms.getLegendGraphic(wmsParams).then((response) => {
-                for (const node of response.nodes) {
-                    // If the layer has no symbology, there is no type property
-                    if (node.hasOwnProperty('type')) {
-                        treeLayer.symbology = node;
-                    }
+            if (isExternalWMS) {
+                // For external WMS layers, get PNG legend directly
+                const wmsParams = {
+                    LAYER: treeLayer.wmsName,
+                    STYLES: treeLayer.wmsSelectedStyleName,
+                    LAYERTITLE: 'FALSE',
+                };
+                try {
+                    const pngUrl = wms.getLegendGraphicPNG(wmsParams);
+                    // Fetch the PNG and convert to base64
+                    const response = await fetch(pngUrl);
+                    const blob = await response.blob();
+                    const reader = new FileReader();
+
+                    await new Promise((resolve, reject) => {
+                        reader.onloadend = () => {
+                            const base64data = reader.result.split(',')[1]; // Remove data:image/png;base64, prefix
+                            treeLayer.symbology = {
+                                type: 'layer',
+                                name: treeLayer.wmsName,
+                                title: treeLayer.name,
+                                icon: base64data
+                            };
+                            resolve();
+                        };
+                        reader.onerror = reject;
+                        reader.readAsDataURL(blob);
+                    });
+                } catch (error) {
+                    console.error('Error loading external WMS legend:', error);
+                    // Fallback to default icon will be handled by symbology state
                 }
-            }).catch((error) => {
-                console.error(error);
-            });
+            } else {
+                // For normal layers, use JSON format
+                const wmsParams = {
+                    LAYER: treeLayer.wmsName,
+                    STYLES: treeLayer.wmsSelectedStyleName,
+                };
+                await wms.getLegendGraphic(wmsParams).then((response) => {
+                    for (const node of response.nodes) {
+                        // If the layer has no symbology, there is no type property
+                        if (node.hasOwnProperty('type')) {
+                            treeLayer.symbology = node;
+                        }
+                    }
+                }).catch((error) => {
+                    console.error(error);
+                });
+            }
         }
         return treeLayers;
     }

lizmap/modules/lizmap/lib/Project/Project.php

@@ -2045,12 +2045,15 @@ public function getUpdatedConfig()
                                 && !array_key_exists('crs', $layerDatasource)) {
                                 $layerDatasource['crs'] = 'EPSG:3857';
                             }
+                            // Set externalWmsToggle for ALL external WMS layers (not just EPSG:3857)
+                            $obj->externalWmsToggle = 'True';
+                            $obj->externalAccess = $layerDatasource;
+
                             // if the layer datasource contains type and crs EPSG:3857
-                            // external access can be provided
+                            // additional external access configuration can be provided
                             if (array_key_exists('type', $layerDatasource)
                                 && $layerDatasource['crs'] == 'EPSG:3857') {
-                                $obj->externalWmsToggle = 'True';
-                                $obj->externalAccess = $layerDatasource;
+                                // Additional external access for EPSG:3857 layers
                             }
                         }
                     }