New script - Show a global legend image for all visible layers

Author: mdouchin

README.md

@@ -85,6 +85,7 @@ the script was written.
 * [Export attribute table to CSV](./library/ui/export-attributetable-csv)
 * [Add button to toggle dock full width](./library/ui/add_dock_resize_button)
 * [Add a hard-coded legend at the bottom of the map](./library/ui/add_hard_coded_legend_at_map_bottom)
+* [Show a global legend image for all visible layers](./library/ui/show_global_legend_image)
 * [Add placeholder to input/textarea elements](./library/ui/add_placeholder_on_text_controls)
 * [Permalink copy to clipboard instead of link](./library/ui/copy-permalink)
 * [Move Layers button after Information](./library/ui/move-button)

library/ui/show_global_legend_image/README.md

@@ -0,0 +1,15 @@
+# Show a global legend image for all visible layers
+
+This scripts adds a new menu item called `Legend` which let the user open a small panel on the top-right corner of the map showing the image legend of the currently active layers.
+
+The legend image is refreshed automatically when the user:
+
+* Toggles the visibility of the map layers in the `Layers` panel
+* zooms or pans the map:
+  * the legend classes will be visible if the corresponding objects are visible in the map
+  * the legend will change accordingly to the map scale
+* and only if the legend panel is visible.
+
+You can edit the JavaScript file to change the label of the tool: replace `Legend` by any other term for the constant `MY_LEGEND_TITLE`.
+
+![show_global_legend_image.gif](./show_global_legend_image.gif)

library/ui/show_global_legend_image/show_global_legend_image.gif

@@ -0,0 +1,107 @@
+const MY_LEGEND_TITLE = 'Legend';
+
+/**
+* Refresh the content of the given target container
+* with the image corresponding to all active & visible layers
+* @param {HTMLElement} targetElement Target element where to display the legend image
+*/
+function refreshGlobalLegendImage(targetElement) {
+    // Do not refresh legend if mini-dock is not visible
+    const isVisible = document.getElementById('global_legend').checkVisibility();
+    if (!isVisible) {
+        return;
+    }
+
+    // console.log('Refresh global legend');
+
+    // Get Lizmap active layers
+    let params = lizMap.mainLizmap.wms._defaultGetLegendGraphicParameters;
+    const activeLayers = lizMap.mainLizmap.state.layersAndGroupsCollection.layers.filter(l => (l.checked && l.visibility));
+    wmsNames = activeLayers.map(layer => layer.wmsName);
+    if (wmsNames.length == 0) return;
+
+    wmsStyles = activeLayers.map(layer => layer.wmsSelectedStyleName);
+    params['LAYERS'] = wmsNames.join();
+    params['STYLE'] = wmsStyles.join();
+    params['FORMAT'] = 'image/png';
+    params['BBOX'] = lizMap.mainLizmap.state.map.extent.join();
+    params['CRS'] = lizMap.mainLizmap.state.map.projection;
+    params['SRCWIDTH'] = lizMap.mainLizmap.state.map.size[0];
+    params['SRCHEIGHT'] = lizMap.mainLizmap.state.map.size[1];
+
+    // Set GetLegendGraphics WMS request
+    lizMap.mainLizmap.utils.fetch(globalThis['lizUrls'].wms, {
+        method: "POST",
+        body: new URLSearchParams(params)
+    }).then((response) => {
+        if (response.status === 200) {
+            return response.blob();
+        }
+        else {
+            console.error("HTTP-Error: " + response.status)
+        }
+    }).then((blob) => {
+        const imageUrl = URL.createObjectURL(blob);
+        const imageElement = document.createElement('img');
+        imageElement.src = imageUrl;
+        targetElement.innerHTML = '';
+        targetElement.appendChild(imageElement);
+    }).catch(console.error);
+}
+
+lizMap.events.on({
+    'uicreated': function(event) {
+
+        // Legend HTML
+        const legend_html = `
+        <div class="my-legend-container">
+            <div id="my-legend-items-container">
+            </div>
+        </div>
+        `;
+
+        // Create mini-dock
+        lizMap.addDock(
+            'global_legend',
+            MY_LEGEND_TITLE,
+            'minidock',
+            legend_html,
+            'icon-tasks'
+        );
+
+        const targetContainer = document.getElementById('my-legend-items-container');
+
+        // Insert image on first load
+        refreshGlobalLegendImage(targetContainer);
+
+        // Refresh image on layers/group change
+        lizMap.mainLizmap.state.rootMapGroup.addListener(
+            () => refreshGlobalLegendImage(targetContainer),
+            ['layer.visibility.changed', 'group.visibility.changed', 'layer.style.changed', 'group.style.changed']
+        );
+
+        // Refresh image on zoom change
+        // We might trigger this on extent change,
+        // but it will increase the number of requests
+        // Useful only if bbox parameter is passed
+        // and if QGIS Server returns only visible symbology classes
+        lizMap.mainLizmap.state.map.addListener(
+            evt => {
+                if (evt.hasOwnProperty('zoom')) {
+                    refreshGlobalLegendImage(targetContainer);
+                }
+            },
+            ['map.state.changed']
+        );
+    },
+
+    'minidockopened': function(event) {
+        if (event.id == 'global_legend') {
+            const targetContainer = document.getElementById('my-legend-items-container');
+            if (targetContainer) {
+                refreshGlobalLegendImage(targetContainer);
+            }
+        }
+    }
+
+});