Baselayers ol7

.gitignore

@@ -108,6 +108,7 @@ tests/end2end/cypress/screenshots/
 tests/js-units/node_modules/
 tests/.env
 tests/end2end/playwright-report/
+tests/end2end/playwright/.auth
 tests/end2end/test-results
 
 /.composer

assets/src/components/BaseLayers.js

@@ -0,0 +1,46 @@
+import { mainLizmap, mainEventDispatcher } from '../modules/Globals.js';
+import {html, render} from 'lit-html';
+
+
+export default class BaseLayers extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+
+        if (mainLizmap.state.baseLayers.baseLayerNames.length === 0) {
+            document.getElementById('switcher-baselayer').classList.add('hide');
+            return;
+        }
+
+        this._template = () => html`
+            ${mainLizmap.state.baseLayers.baseLayerNames.length > 1 
+                ? html`
+                <select @change=${(event) => { mainLizmap.state.baseLayers.selectedBaseLayerName = event.target.value }}>
+                    ${mainLizmap.state.baseLayers.baseLayerConfigs.map((config) => 
+                    html`<option .selected="${mainLizmap.state.baseLayers.selectedBaseLayerName === config.name}" value="${config.name}">${config.title === 'empty' ? lizDict['baselayer.empty.title'] : config.title}</option>`
+                    )}
+                </select>`
+                : 
+                html`${mainLizmap.state.baseLayers.baseLayerNames[0].title}`
+            }
+        `;
+
+        render(this._template(), this);
+
+        mainEventDispatcher.addListener(
+            () => {
+                render(this._template(), this);
+            }, ['baselayers.selection.changed']
+        );
+    }
+
+    disconnectedCallback() {
+        mainEventDispatcher.removeListener(
+            () => {
+                render(this._template(), this);
+            }, ['baselayers.selection.changed']
+        );
+    }
+}

assets/src/components/Print.js

@@ -230,34 +230,17 @@ export default class Print extends HTMLElement {
         }
 
         // Add visible layers
-        for (const layer of mainLizmap._lizmap3.map.layers) {
-            if (((layer instanceof OpenLayers.Layer.WMS) || (layer instanceof OpenLayers.Layer.WMTS))
-                && layer.getVisibility() && layer?.params?.LAYERS) {
-                // Get config
-                let configLayer;
-                let layerCleanName = mainLizmap._lizmap3.cleanName(layer.name);
-
-                if (layerCleanName) {
-                    let qgisName = mainLizmap._lizmap3.getLayerNameByCleanName(layerCleanName);
-                    configLayer = mainLizmap.config.layers[qgisName];
-                }
-                if (!configLayer) {
-                    configLayer = mainLizmap.config.layers[layer.params['LAYERS']] || mainLizmap.config.layers[layer.name];
-                }
-                // If the layer has no config or no `id` it is not a QGIS layer or group
-                if (!configLayer || !configLayer?.id) {
-                    return;
-                }
-
+        for (const layer of mainLizmap.state.rootMapGroup.findMapLayers().slice().reverse()) {
+            if (layer.visibility) {
                 // Add layer to the list of printed layers
-                printLayers.push(layer.params['LAYERS']);
+                printLayers.push(layer.wmsName);
 
                 // Optionally add layer style if needed (same order as layers )
-                styleLayers.push(layer.params?.['STYLES'] || '');
+                styleLayers.push(layer.wmsSelectedStyleName);
 
                 // Handle qgis layer opacity otherwise client value override it
-                if (configLayer?.opacity) {
-                    opacityLayers.push(parseInt(255 * layer.opacity * configLayer.opacity));
+                if (layer.layerConfig?.opacity) {
+                    opacityLayers.push(parseInt(255 * layer.opacity * layer.layerConfig.opacity));
                 } else {
                     opacityLayers.push(parseInt(255 * layer.opacity));
                 }

assets/src/components/Treeview.js

@@ -0,0 +1,112 @@
+import { mainLizmap } from '../modules/Globals.js';
+
+import { html, render } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
+
+export default class Treeview extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+
+        this._onChange = () => {
+            render(this._layerTemplate(mainLizmap.state.layerTree), this);
+        };
+
+        this._layerTemplate = layerTreeGroupState =>
+        html`
+        <ul>
+            ${layerTreeGroupState.children.map(item => html`
+            <li>
+                ${item.type === 'group' || (item.symbologyChildrenCount && item.layerConfig.legendImageOption !== "disabled")
+                    ? html`<div class="expandable ${item.expanded ? 'expanded' : ''}" @click=${() => item.expanded = !item.expanded}></div>`
+                    : ''
+                }
+                <div class="${item.checked ? 'checked' : ''} ${item.type}">
+                    <div class="loading ${item.loading ? 'spinner' : ''}"></div>
+                    <input class="${layerTreeGroupState.mutuallyExclusive ? 'rounded-checkbox' : ''}" type="checkbox" id="node-${item.name}" .checked=${item.checked} @click=${() => item.checked = !item.checked} >
+                    <div class="node ${item.isFiltered ? 'filtered' : ''}">
+                        ${item.type === 'layer'
+                            ? html`<img class="legend" src="${item.icon}">`
+                            : ''
+                        }
+                        <label for="node-${item.name}">${item.name}</label>
+                        <div class="layer-actions">
+                            <a href="${this._createDocLink(item.name)}" target="_blank" title="${lizDict['tree.button.link']}">
+                                <i class="icon-share"></i>
+                            </a>
+                            <a href="${this._createRemoveCacheLink(item.name)}" target="_blank">
+                                <i class="icon-remove-sign" title="${lizDict['tree.button.removeCache']}" @click=${event => this._removeCache(event)}></i>
+                            </a>
+                            <i class="icon-info-sign" @click=${() => this._toggleMetadata(item.name, item.type)}></i>
+                        </div>
+                    </div>
+                </div>
+                ${(item.symbologyChildrenCount && item.layerConfig.legendImageOption !== "disabled")
+                    ? html`
+                        <ul class="symbols">
+                            ${item.symbologyChildren.map(symbol => html`
+                            <li>
+                                <label class="symbol-title">
+                                    <input type="checkbox" .checked=${symbol.checked} @click=${() => symbol.checked = !symbol.checked}>
+                                    <img class="legend" src="${symbol.icon}">
+                                    ${symbol.title}
+                                </label>
+                            </li>`
+                            )}
+                        </ul>`
+                    : ''
+                }
+                ${when(item.type === 'group', () => this._layerTemplate(item))}
+            </li>`
+            )}
+        </ul>`;
+
+        render(this._layerTemplate(mainLizmap.state.layerTree), this);
+
+        mainLizmap.state.layerTree.addListener(
+            this._onChange,
+            ['layer.loading.changed', 'layer.visibility.changed', 'group.visibility.changed', 'layer.style.changed', 'layer.symbology.changed', 'layer.filter.changed', 'layer.expanded.changed', 'group.expanded.changed']
+        );
+    }
+
+    disconnectedCallback() {
+        mainLizmap.state.layerTree.removeListener(
+            this._onChange,
+            ['layer.loading.changed', 'layer.visibility.changed', 'group.visibility.changed', 'layer.style.changed', 'layer.symbology.changed', 'layer.filter.changed', 'layer.expanded.changed', 'group.expanded.changed']
+        );
+    }
+
+    _createDocLink(layerName) {
+        let url = lizMap.config.layers?.[layerName]?.link;
+
+        // Test if the url is internal
+        const mediaRegex = /^(\/)?media\//;
+        if (mediaRegex.test(url)) {
+            const mediaLink = lizUrls.media + '?' + new URLSearchParams(lizUrls.params);
+            url = mediaLink + '&path=/' + url;
+        }
+        return url;
+    }
+
+    _createRemoveCacheLink(layerName) {
+        if(!lizUrls.removeCache){
+            return;
+        }
+        const removeCacheServerUrl = lizUrls.removeCache + '?' + new URLSearchParams(lizUrls.params);
+        return removeCacheServerUrl + '&layer=' + layerName;
+    }
+
+    _removeCache(event) {
+        if (! confirm(lizDict['tree.button.removeCache.confirmation'])){
+            event.preventDefault();
+        }
+    }
+
+    _toggleMetadata (layerName, isGroup){
+        lizMap.events.triggerEvent("lizmapswitcheritemselected",
+          { 'name': layerName, 'type': isGroup ? "group" : "layer", 'selected': true}
+        )
+    }
+}

assets/src/index.js

@@ -13,6 +13,8 @@ import PasteGeom from './components/edition/PasteGeom.js';
 import ActionSelector from './components/ActionSelector.js';
 import Print from './components/Print.js';
 import FullScreen from './components/FullScreen.js';
+import BaseLayers from './components/BaseLayers.js';
+import Treeview from './components/Treeview.js';
 
 import { mainLizmap, mainEventDispatcher } from './modules/Globals.js';
 
@@ -35,6 +37,8 @@ lizMap.events.on({
         window.customElements.define('lizmap-action-selector', ActionSelector);
         window.customElements.define('lizmap-print', Print);
         window.customElements.define('lizmap-fullscreen', FullScreen);
+        window.customElements.define('lizmap-base-layers', BaseLayers);
+        window.customElements.define('lizmap-treeview', Treeview);
 
         lizMap.mainLizmap = mainLizmap;
         lizMap.mainEventDispatcher = mainEventDispatcher;