Fix #5934: Display legend for external WMS layers #6114

meyerlor · 2025-09-30T12:35:44Z

I hope to help and fix the missing legends for external WMS services:

External WMS layers were showing empty legend icons because QGIS Server
returns empty icon fields in JSON GetLegendGraphic responses.

Added getLegendGraphicPNG() method to WMS class
Modified updateLayerTreeLayersSymbology() to detect external WMS layers
External WMS layers now fetch PNG legend and convert to base64
Normal layers continue using JSON format (no breaking changes)

I'm not sure if that is enough to get a proper legend from the WMS, i was not able to run proper tests, i just wanted to lay the groundwork to get WMS legends working (i hope it does not interfere with the recent changes which sped up the loading time so much! 😃 )

External WMS layers were showing empty legend icons because QGIS Server returns empty icon fields in JSON GetLegendGraphic responses. - Added getLegendGraphicPNG() method to WMS class - Modified updateLayerTreeLayersSymbology() to detect external WMS layers - External WMS layers now fetch PNG legend and convert to base64 - Normal layers continue using JSON format (no breaking changes)

rldhont · 2025-10-06T08:50:22Z

Thanks @meyerlor

Can you provide a printscreen with your fix ? I'm not sure that the GetLegendGraphic will be well displayed as an icon.

meyerlor · 2025-10-08T15:24:29Z

I'm away from a computer the next three weeks, will get back at it as soon I'm back!

Fixed the external WMS layer detection to use the correct property path and handle both boolean and string values from the backend. Changes: - Updated path from itemState.externalWmsToggle to itemState.layerConfig.externalWmsToggle - Added support for string value 'True' in addition to boolean true - Cleaned up unnecessary comments for better code clarity This ensures external WMS layers are properly detected and their legends are fetched in PNG format instead of JSON.

Previously, externalWmsToggle was only set for layers with EPSG:3857. This change enables it for ALL external WMS layers regardless of CRS. Changes: - Set externalWmsToggle = 'True' for all external WMS layers - Keep EPSG:3857 specific handling for future use - Allows legend display for external WMS in any projection This works together with the JavaScript improvements to properly display legends for all external WMS layers.

Updated the property path to access externalWmsToggle correctly through the internal object structure. Changes: - Access via _mapItemState._layerItemState._layerTreeItemCfg._layerCfg - Check _externalWmsToggle (private property with underscore) - Maintains support for both boolean true and string 'True' This ensures external WMS layers are properly detected and their legends are displayed correctly.

Added LAYERTITLE: 'FALSE' parameter for external WMS layers to suppress the layer title in the legend graphic response. Changes: - Moved wmsParams definition into separate if/else blocks - External WMS: wmsParams includes LAYERTITLE: 'FALSE' - Normal layers: wmsParams without LAYERTITLE (unchanged behavior) This improves the legend display by removing unnecessary titles from external WMS layer legends.

meyerlor · 2025-11-14T21:42:46Z

I worked on it, now it's displaying for external wms the legend as PNG:

The first layer Pachtflächen is a rule based styled layer, here still the json is retrieved.

Restored all original comments that were removed in previous commits: - Added back comment about empty tree layers check - Restored comment about fetching PNG and converting to base64 - Restored inline comment about removing data:image/png;base64 prefix - Restored comment about fallback to default icon - Restored comments about symbology type property checks - Restored detailed error handling comments for POST method timeout Also removed German comment and replaced with original structure: - Removed: 'POST method code bleibt unverändert...' This improves code readability and maintains original documentation.

rldhont

Hi @meyerlor,

First of all, thanks for your pull request. I suggest some improvements.

The main for me is to do not load the legend image and simulate a symbology but to enhance the Treeview component to display the legend as image when it is needed.

You will have to enhance the this._layerTemplate in assets/src/components/Treeview.js

rldhont · 2025-12-03T17:18:51Z

assets/src/modules/action/Symbology.js

+            const layerCfg = treeLayer._mapItemState?._layerItemState?._layerTreeItemCfg?._layerCfg;
+            const isExternalWMS = layerCfg?._externalWmsToggle === true
+                               || layerCfg?._externalWmsToggle === 'True';


Suggested change

const layerCfg = treeLayer._mapItemState?._layerItemState?._layerTreeItemCfg?._layerCfg;

const isExternalWMS = layerCfg?._externalWmsToggle === true

|| layerCfg?._externalWmsToggle === 'True';

const isExternalWMS = treeLayer.layerConfig.externalWmsToggle;

rldhont · 2025-12-04T14:08:07Z

assets/src/modules/action/Symbology.js

-            }).catch((error) => {
-                console.error(error);
-            });
+            } else {


Suggested change

} else {

if (!isExternalWMS) {

Request JSON only for non external WMS

rldhont · 2025-12-04T14:09:31Z

assets/src/modules/action/Symbology.js

+            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


Suggested change

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

Do not request the image and simulate a child icon. I prefer to enhance the treeview component to display the legend image has a child.

rldhont · 2025-12-04T14:14:35Z

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

+                            // Set externalWmsToggle for ALL external WMS layers (not just EPSG:3857)
+                            $obj->externalWmsToggle = 'True';
+                            $obj->externalAccess = $layerDatasource;


Suggested change

// Set externalWmsToggle for ALL external WMS layers (not just EPSG:3857)

$obj->externalWmsToggle = 'True';

$obj->externalAccess = $layerDatasource;

if (array_key_exists('type', $layerDatasource)

&& $layerDatasource['type'] == 'wms') {

// Set externalWmsToggle for ALL external WMS layers (not just EPSG:3857)

$obj->externalWmsToggle = 'True';

$obj->externalAccess = $layerDatasource;

}

Activate external only for WMS layers.

We should verify that the project's projection is recognized by the source service or that the OpenLayers layer created reuses the CRS of the source layer.

rldhont · 2025-12-04T14:16:43Z

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

                                && $layerDatasource['crs'] == 'EPSG:3857') {
-                                $obj->externalWmsToggle = 'True';
-                                $obj->externalAccess = $layerDatasource;
+                                // Additional external access for EPSG:3857 layers


keeps it for other $layerDatasource by using an else if or an || in the previous if

github-actions bot added this to the 3.11.0 milestone Sep 30, 2025

meyerlor force-pushed the external-wms-legend-icon branch from ac3f5a4 to 1e8f8ba Compare November 9, 2025 09:46

meyerlor added 5 commits November 14, 2025 09:04

Merge branch '3liz:master' into external-wms-legend-icon

b595cee

rldhont added legend/layer tree Tool which displays the layer tree with legends backport release_3_9 backport release_3_10 labels Nov 26, 2025

rldhont requested changes Dec 4, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Fix #5934: Display legend for external WMS layers #6114

Fix #5934: Display legend for external WMS layers #6114

Uh oh!

meyerlor commented Sep 30, 2025 •

edited

Loading

Uh oh!

rldhont commented Oct 6, 2025

Uh oh!

meyerlor commented Oct 8, 2025

Uh oh!

meyerlor commented Nov 14, 2025 •

edited

Loading

Uh oh!

rldhont left a comment

Uh oh!

rldhont Dec 3, 2025

Uh oh!

rldhont Dec 4, 2025

Uh oh!

rldhont Dec 4, 2025

Uh oh!

rldhont Dec 4, 2025

Uh oh!

rldhont Dec 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Fix #5934: Display legend for external WMS layers #6114

Are you sure you want to change the base?

Fix #5934: Display legend for external WMS layers #6114

Uh oh!

Conversation

meyerlor commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rldhont commented Oct 6, 2025

Uh oh!

meyerlor commented Oct 8, 2025

Uh oh!

meyerlor commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rldhont left a comment

Choose a reason for hiding this comment

Uh oh!

rldhont Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

rldhont Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

rldhont Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

rldhont Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

rldhont Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

meyerlor commented Sep 30, 2025 •

edited

Loading

meyerlor commented Nov 14, 2025 •

edited

Loading