@geogirafe/lib-geoportal 1.1.0-dev.2316166507 → 1.1.0-dev.2318696406

package/assets/i18n/de.json

@@ -410,6 +410,7 @@
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Der folgende Link wird mit Ihrer Nachricht gesendet. Er enthält Ihre aktuelle Konfiguration und hilft uns, Ihr Problem zu verstehen.",
     "The generated document may contain sensitive data.": "Das generierte Dokument kann sensible Daten enthalten.",
     "The print server is unavailable. Please, try later.": "Der Druckserver ist nicht verfügbar. Bitte versuche es später erneut.",
+    "The theme {name} is already present in the treeview.": "Das Thema {name} ist bereits im Layerbaum vorhanden.",
     "theme": "Standardthema",
     "Theme selection": "Themenauswahl",
     "Themes": "Themen",

package/assets/i18n/en.json

@@ -412,6 +412,7 @@
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.",
     "The generated document may contain sensitive data.": "The generated document may contain sensitive data.",
     "The print server is unavailable. Please, try later.": "The print server is unavailable. Please, try later.",
+    "The theme {name} is already present in the treeview.": "The theme {name} is already present in the treeview.",
     "theme": "Default theme",
     "Theme selection": "Theme selection",
     "Themes": "Themes",

package/assets/i18n/fr.json

@@ -410,6 +410,7 @@
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Le lien ci-dessous sera envoyé avec votre message. Il contient votre configuration courante et nous aidera à analyser votre demande.",
     "The generated document may contain sensitive data.": "Le document généré peut contenir des données sensibles.",
     "The print server is unavailable. Please, try later.": "Le serveur d'impression est indisponible. Veuillez réessayer plus tard.",
+    "The theme {name} is already present in the treeview.": "Le thème {name} est déjà présent dans l’arbre des couches.",
     "theme": "Thème par défaut",
     "Theme selection": "Sélection du thème",
     "Themes": "Thèmes",

package/assets/i18n/it.json

@@ -410,6 +410,7 @@
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Il seguente link verrà inviato con il tuo messaggio. Contiene la tua configurazione attuale e ci aiuterà a capire il problema.",
     "The generated document may contain sensitive data.": "Il documento generato potrebbe contenere dati sensibili.",
     "The print server is unavailable. Please, try later.": "Il server di stampa non è disponibile. Riprova più tardi.",
+    "The theme {name} is already present in the treeview.": "Il tema {name} è già presente nella struttura ad albero.",
     "theme": "Tema predefinito",
     "Theme selection": "Selezione del tema",
     "Themes": "Temi",

package/assets/icons/adjust-disable.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5f6368" viewBox="0 -960 960 960"><path d="M480-360q50 0 85-35t35-85-35-85-85-35-85 35-35 85 35 85 85 35m0 280q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"/><path d="m67.025-67.033 826.657-826.666" style="fill:none;stroke:#000;stroke-width:53.0651;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"/></svg>

package/components/contact/component.js

@@ -7,7 +7,7 @@ class ContactComponent extends GirafeHTMLElement {
 </style><style>
 #content{background:var(--bkg-color);color:var(--text-color);flex-direction:column;margin:0;padding:1rem;display:flex}label,input,select,textarea{flex-grow:1;font-size:.9rem}.gg-input,.gg-select{margin-bottom:1rem}.mail-contact{margin-top:2rem;margin-bottom:2rem}
 </style>
-<div id="panel"><div id="content"><label for="email" i18n="Your email (optional)" class="gg-label">Your email (optional)</label> <input id="email" placeholder="superman@example.com" class="gg-input"> <label for="reason" i18n="Why are you contacting us?" class="gg-label">Why are you contacting us?</label> <select id="reason" class="gg-select"><option value="" disabled="disabled" selected="selected">-</option>${this.context.configManager.Config.contact?.reasons.map((reason) => uHtml `<option i18n="${reason}" value="${reason}">${reason}</option>`)}</select> <label for="message" i18n="Your message" class="gg-label">Your message</label> <textarea id="message" class="gg-input gg-textarea"></textarea> <label for="shortlink" i18n="The following link will be sent with your message. It contains your current configuration and will help us to understand your problem." class="gg-label">The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.</label> <input id="shortlink" disabled="disabled" value="${this.shortUrl}" class="gg-input"><div class="mail-contact"><span i18n="You can also contact us directly by E-Mail at">You can also contact us directly by E-Mail at</span> <a href="${'mailto:' + this.context.configManager.Config.contact?.email}">${this.context.configManager.Config.contact?.email}</a></div><button class="gg-button" tip="Send message" i18n="Send" onclick="${() => this.sendMessage()}">Send</button></div></div>`;
+<div id="panel"><div id="content"><label for="email" i18n="Your email (optional)" class="gg-label">Your email (optional)</label> <input id="email" placeholder="you@example.com" class="gg-input"> <label for="reason" i18n="Why are you contacting us?" class="gg-label">Why are you contacting us?</label> <select id="reason" class="gg-select"><option value="" disabled="disabled" selected="selected">-</option>${this.context.configManager.Config.contact?.reasons.map((reason) => uHtml `<option i18n="${reason}" value="${reason}">${reason}</option>`)}</select> <label for="message" i18n="Your message" class="gg-label">Your message</label> <textarea id="message" class="gg-input gg-textarea"></textarea> <label for="shortlink" i18n="The following link will be sent with your message. It contains your current configuration and will help us to understand your problem." class="gg-label">The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.</label> <input id="shortlink" disabled="disabled" value="${this.shortUrl}" class="gg-input"><div class="mail-contact"><span i18n="You can also contact us directly by E-Mail at">You can also contact us directly by E-Mail at</span> <a href="${'mailto:' + this.context.configManager.Config.contact?.email}">${this.context.configManager.Config.contact?.email}</a></div><button class="gg-button" tip="Send message" i18n="Send" onclick="${() => this.sendMessage()}">Send</button></div></div>`;
     };
     isPanelVisible = false;
     panelTitle = 'contact-panel';

package/components/map/component.d.ts

@@ -74,6 +74,7 @@ export default class MapComponent extends GirafeHTMLElement {
     registerEvents(): void;
     locateUser(): void;
     getCurrentLocation(): void;
+    disableLocateUser: () => void;
     readonly updateGeolocation: (position: GeolocationPosition) => void;
     render(): void;
     listenOpenLayersEvents(): void;

package/components/map/component.js

@@ -46,9 +46,9 @@ export default class MapComponent extends GirafeHTMLElement {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style><style>
-#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.ol-rotate-reset{cursor:pointer;background-color:#fff;width:2rem!important;height:2rem!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}.ol-popup{background-color:var(--bkg-color);color:var(--text-color);box-shadow:0 1px 4px var(--bx-shdw);border:1px solid var(--text-color-grad1);border-radius:10px;min-width:140px;padding:15px;position:absolute;bottom:12px;left:-50px}.ol-popup:after,.ol-popup:before{content:" ";pointer-events:none;border:solid #0000;width:0;height:0;position:absolute;top:100%}.ol-popup:after{border-top-color:var(--bkg-color);border-width:10px;margin-left:-10px;left:48px}.ol-popup:before{border-top-color:var(--text-color-grad1);border-width:11px;margin-left:-11px;left:48px}.ol-popup-closer{background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;text-decoration:none;position:absolute;top:2px;right:8px}.ol-popup-closer:after{content:"✖"}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1*var(--button-size)/2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
+#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location,.img-disable-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.ol-rotate-reset{cursor:pointer;background-color:#fff;width:2rem!important;height:2rem!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}.ol-popup{background-color:var(--bkg-color);color:var(--text-color);box-shadow:0 1px 4px var(--bx-shdw);border:1px solid var(--text-color-grad1);border-radius:10px;min-width:140px;padding:15px;position:absolute;bottom:12px;left:-50px}.ol-popup:after,.ol-popup:before{content:" ";pointer-events:none;border:solid #0000;width:0;height:0;position:absolute;top:100%}.ol-popup:after{border-top-color:var(--bkg-color);border-width:10px;margin-left:-10px;left:48px}.ol-popup:before{border-top-color:var(--text-color-grad1);border-width:11px;margin-left:-11px;left:48px}.ol-popup-closer{background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;text-decoration:none;position:absolute;top:2px;right:8px}.ol-popup-closer:after{content:"✖"}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1*var(--button-size)/2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
 </style>
-<link rel="stylesheet" href="lib/ol/ol.css"><div id="container"><div id="ol-map"></div><div class="ol-location ol-unselectable ol-control"><button onclick="${() => this.locateUser()}" class="btn-location"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>`;
+<link rel="stylesheet" href="lib/ol/ol.css"><div id="container"><div id="ol-map"></div><div class="ol-location ol-unselectable ol-control"><button onclick="${() => this.locateUser()}" class="btn-location"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>`;
     };
     olMap;
     mapTarget;
@@ -169,6 +169,7 @@ export default class MapComponent extends GirafeHTMLElement {
             // The user's current position is utilized to show the distance to objects in the layer
             navigator.permissions.query({ name: 'geolocation' }).then((result) => {
                 if (result.state === 'granted' || result.state === 'prompt') {
+                    this.shadow.getElementById('disable-location')?.classList.remove('hidden');
                     this.getCurrentLocation();
                 }
             });
@@ -199,6 +200,10 @@ export default class MapComponent extends GirafeHTMLElement {
             maximumAge: 0
         });
     }
+    disableLocateUser = () => {
+        this.geolocationSource.clear();
+        this.shadow.getElementById('disable-location')?.classList.add('hidden');
+    };
     updateGeolocation = (position) => {
         const coords = position.coords;
         const longitude = coords.longitude;

package/components/search/component.d.ts

@@ -6,7 +6,7 @@ declare class SearchComponent extends GirafeHTMLElement {
     paintbrushIcon: string;
     private get map();
     private readonly previewFeaturesCollection;
-    private previewLayers;
+    private previewLayers?;
     private previewGeoLayer;
     private maxExtent?;
     private readonly geoJsonFormatter;

package/components/search/component.js

@@ -30,7 +30,7 @@ class SearchComponent extends GirafeHTMLElement {
         return this.context.mapManager.getMap();
     }
     previewFeaturesCollection = new Collection();
-    previewLayers = [];
+    previewLayers;
     previewGeoLayer = null;
     maxExtent;
     geoJsonFormatter = new GeoJSON();
@@ -321,14 +321,19 @@ class SearchComponent extends GirafeHTMLElement {
         // Clear preview search result
         this.previewFeaturesCollection.clear();
         // Clear preview layer
-        this.context.themesHelper.removeLayersFromLayerTree(this.previewLayers);
-        this.previewLayers = [];
+        if (this.previewLayers) {
+            this.context.themesHelper.removeLayersFromLayerTree(this.previewLayers.insertedLayers);
+            for (const layer of this.previewLayers.activatedLayers) {
+                this.context.layerManager.toggle(layer, 'off');
+            }
+            this.previewLayers = undefined;
+        }
     }
     onSelect(feature) {
         this.selectedResult = feature;
         this.ignoreBlur = false;
         this.forceHide = true;
-        this.previewLayers = [];
+        this.previewLayers = undefined;
         super.render();
         const geom = feature.getGeometry();
         if (geom) {

package/components/themes/component.js

@@ -39,6 +39,9 @@ class ThemeComponent extends GirafeHTMLElement {
         super.render();
     }
     onThemeChanged(theme) {
+        if (this.context.configManager.Config.themes.selectionMode === 'add') {
+            this.state.themes.lastSelectedTheme = null;
+        }
         this.state.themes.lastSelectedTheme = theme;
         if (theme.disclaimer) {
             this.state.infobox.elements.push({

package/components/treeview/tools/treeviewelement.d.ts

@@ -6,9 +6,11 @@ export default abstract class TreeViewElement extends GirafeHTMLElement {
     protected layer: BaseLayer;
     private dragButton;
     private container;
+    private header;
     constructor(layer: BaseLayer, name: string);
     protected connectedCallback(): void;
     render(): void;
+    private highlight;
     refreshRender(): void;
     refreshRender(layer?: BaseLayer): void;
     protected showMetadata(): void;

package/components/treeview/tools/treeviewelement.js

@@ -10,6 +10,7 @@ export default class TreeViewElement extends GirafeHTMLElement {
     layer;
     dragButton;
     container;
+    header;
     constructor(layer, name) {
         super(name);
         this.layer = layer;
@@ -22,11 +23,28 @@ export default class TreeViewElement extends GirafeHTMLElement {
         super.render();
         this.dragButton = this.shadow.getElementById('drag-button');
         this.container = this.shadow.getElementById('container');
+        this.header = this.shadow.querySelector('header');
         super.girafeTranslate();
         this.initializeDrag();
         if (isTimeAwareLayer(this.layer)) {
             this.createTimeRestrictionTooltip(this.layer);
         }
+        this.subscribe(/layers\.layersList\..*\.isHighlighted/, (_oldValue, newValue, layer) => {
+            if (newValue && layer === this.layer) {
+                this.highlight();
+            }
+        });
+    }
+    highlight() {
+        this.header.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+        });
+        this.header.classList.add('highlight');
+        setTimeout(() => {
+            this.header.classList.remove('highlight');
+            this.layer.isHighlighted = false;
+        }, 3000);
     }
     refreshRender(layer) {
         if (this.state.treeview.renderEnabled && (!layer || layer === this.layer)) {
@@ -34,6 +52,9 @@ export default class TreeViewElement extends GirafeHTMLElement {
             // Else, call refresh only if the layer in param is the current one
             super.refreshRender();
             super.girafeTranslate();
+            if (this.layer.isHighlighted) {
+                this.highlight();
+            }
         }
     }
     showMetadata() {

package/components/treeview/treeviewgroup/component.js

@@ -5,7 +5,7 @@ import TreeViewGroupElement from '../tools/treeviewgroupelement.js';
 class TreeViewGroupComponent extends TreeViewGroupElement {
     template = () => {
         return uHtml `<style>
-header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}
+header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
 </style><style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style>

package/components/treeview/treeviewitem/component.js

@@ -10,7 +10,7 @@ import WmsLegendHelper from '../../../tools/wms/wmslegendhelper.js';
 class TreeViewItemComponent extends TreeViewElement {
     template = () => {
         return uHtml `<style>
-header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}
+header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
 </style><style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style>

package/components/treeview/treeviewtheme/component.js

@@ -10,7 +10,7 @@ class TreeViewThemeComponent extends TreeViewGroupElement {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style><style>
-header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}
+header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
 </style><style>
 header{border:none;flex-direction:row-reverse;margin-top:.5rem;margin-bottom:.5rem;position:relative}.theme-button{font-size:1.2rem;font-weight:600}.theme-button span{margin-left:.5rem}.theme-button:hover{cursor:default;background-color:#0000;border:none}.children{padding-left:.5rem}.children:first-child{border:none}.label-container{position:absolute;inset:0}.label-container button{text-align:center;flex-grow:1}.tool{z-index:1}
 </style>

package/main.tools.js

@@ -43,5 +43,10 @@ export function redirectTo(page) {
     mobileUrl.pathname = pathParts.join('/');
     mobileUrl.search = currentUrl.search;
     mobileUrl.hash = currentUrl.hash;
-    globalThis.location.href = mobileUrl.toString();
+    setTimeout(() => {
+        // Dispatch special event before redirecting, because some components need perhaps to do/cancel things
+        const event = new CustomEvent('gg:redirect');
+        globalThis.dispatchEvent(event);
+        globalThis.location.href = mobileUrl.toString();
+    });
 }

package/models/layers/baselayer.d.ts

@@ -26,6 +26,7 @@ declare abstract class BaseLayer {
     hasError: boolean;
     errorMessage: string | null;
     get hasMetadata(): boolean;
+    isHighlighted: boolean;
     abstract activeState: string;
     abstract get active(): boolean;
     abstract get inactive(): boolean;

package/models/layers/baselayer.js

@@ -31,6 +31,7 @@ class BaseLayer {
     get hasMetadata() {
         return this.metadataUrl !== undefined;
     }
+    isHighlighted = false;
     parent;
     constructor(id, name, order, options) {
         this.id = id;

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.1.0-dev.2316166507",
+  "version": "1.1.0-dev.2318696406",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/styles/variables.css

@@ -6,6 +6,7 @@ body {
   --bkg-color: rgb(255, 255, 255);
   --text-color: #222;
   --link-color: grey;
+  --highlight-color: rgba(0, 120, 255, 0.1);
 
   --bx-shdw: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.16);
   --t-bkg: #ffffffbb;
@@ -47,6 +48,7 @@ body.dark-theme {
   --success-color: #529c52;
   --svg-filter: invert(1) hue-rotate(180deg);
   --svg-legend-bkg: var(--legend-bkg);
+  --highlight-color: rgba(174, 208, 247, 0.5);
 }
 
 /* Legends theme colors for the map */
@@ -78,6 +80,7 @@ body.dark-map {
     --svg-filter: invert(1);
     --svg-map-filter: invert(1) hue-rotate(180deg);
     --svg-legend-bkg: var(--legend-bkg);
+    --highlight-color: rgba(174, 208, 247, 0.5);
   }
 
   /* Override dark mode with light mode styles if the user decides to swap */
@@ -98,6 +101,7 @@ body.dark-map {
     --lnk-active: #ff0000;
     --svg-filter: none;
     --svg-legend-bkg: var(--legend-bkg);
+    --highlight-color: rgba(0, 120, 255, 0.1);
   }
   body.dark-theme.light-map {
     --svg-map-filter: none;

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2316166507", "build":"2316166507", "date":"10/02/2026"}
+{"version":"1.1.0-dev.2318696406", "build":"2318696406", "date":"11/02/2026"}

package/tools/configuration/configmanager.d.ts

@@ -1,10 +1,13 @@
 import GirafeSingleton from '../../base/GirafeSingleton.js';
 import GirafeConfig from './girafeconfig.js';
+import IGirafeContext from '../context/icontext.js';
 declare class ConfigManager extends GirafeSingleton {
     private config;
     private defaultConfig;
     private loadingPromise;
     private readonly storagePathForOverrides;
+    private readonly abortController;
+    constructor(context: IGirafeContext);
     get Config(): GirafeConfig;
     private getConfigUrls;
     loadConfig(): Promise<GirafeConfig>;

package/tools/configuration/configmanager.js

@@ -7,6 +7,13 @@ class ConfigManager extends GirafeSingleton {
     defaultConfig = null;
     loadingPromise = null;
     storagePathForOverrides = 'configOverrides';
+    abortController = new AbortController();
+    constructor(context) {
+        super(context);
+        globalThis.addEventListener('gg:redirect', () => {
+            this.abortController.abort();
+        });
+    }
     get Config() {
         return this.config;
     }
@@ -53,18 +60,17 @@ class ConfigManager extends GirafeSingleton {
         let jsonConfig = {};
         for (const configUrl of configUrls) {
             try {
-                const response = await fetch(configUrl);
+                const response = await fetch(configUrl, { signal: this.abortController.signal });
                 const newJsonConfig = await response.json();
                 jsonConfig = this.mergeConfigs(jsonConfig, newJsonConfig);
             }
             catch {
-                // TODO REG: Manage better the errors at the aplication start:
-                // - the window.gAlert fuction should be callable at the very beggining of the app
-                // - The ErrorManager should handled suches case, but it seems to be initialized too late.
-                // - normal alerts seems to be blocked on mobile.
-                const errorMessage = `Error while reading the configuration file ${configUrl}. Please verify your configuration.`;
-                window.alert(errorMessage);
-                throw new Error(errorMessage);
+                // If the loading of config file was aborted due to automatic redirect to another interface
+                // We do not display any error.
+                if (!this.abortController.signal.aborted) {
+                    const errorMessage = `Error while reading the configuration file ${configUrl}. Please verify your configuration.`;
+                    globalThis.alert(errorMessage);
+                }
             }
         }
         // Create a backup of the default config before applying overrides

package/tools/layers/layermanager.d.ts

@@ -34,5 +34,6 @@ declare class LayerManager extends GirafeSingleton {
     isLayerWithFilter(layer: ILayerWithFilter | Layer): layer is ILayerWithFilter;
     getSortedLayers(layers: BaseLayer[]): BaseLayer[];
     private activateDefaultLayers;
+    private highlightNewLayers;
 }
 export default LayerManager;

package/tools/layers/layermanager.js

@@ -21,6 +21,7 @@ class LayerManager extends GirafeSingleton {
         this.layerClones.push(...addedLayers);
         this.fillLayerIdToClone(addedLayers);
         this.activateDefaultLayers(addedLayers);
+        this.highlightNewLayers(addedLayers);
     }
     fillLayerIdToClone(layers) {
         for (const layer of layers) {
@@ -277,5 +278,13 @@ class LayerManager extends GirafeSingleton {
             }
         }
     }
+    highlightNewLayers(layers) {
+        // Do not highlight at application start
+        if (this.state.application.isReady) {
+            for (const layer of layers) {
+                layer.isHighlighted = true;
+            }
+        }
+    }
 }
 export default LayerManager;

package/tools/main.d.ts

@@ -91,6 +91,7 @@ export type { GgUserInteractionEvent } from './state/userinteractionevent.js';
 export { gGEventDependencies, isPrimaryPointerAction, isAlternateMouseClick, isMouseWheelClick } from './state/userinteractionevent.js';
 export { default as CustomThemesManager } from './themes/customthemesmanager.js';
 export { DEFAULT_OPACITY, OPACITY_FOR_DEFAULT_BASEMAP } from './themes/themes-config.js';
+export type { LayerTreeChanges } from './themes/themeshelper.js';
 export { default as ThemesHelper } from './themes/themeshelper.js';
 export { default as ThemesManager } from './themes/themesmanager.js';
 export { default as UserLayerManager } from './themes/userlayermanager.js';

package/tools/state/mapManager.d.ts

@@ -1,11 +1,12 @@
 import GirafeSingleton from '../../base/GirafeSingleton.js';
-import MapOL from 'ol/Map.js';
+import OlMap from 'ol/Map.js';
 import type { Extent } from 'ol/extent.js';
 import type BaseLayer from 'ol/layer/Base.js';
 /** The singleton containing the main OpenLayers map accessible from everywhere */
 export default class MapManager extends GirafeSingleton {
-    private readonly map;
-    getMap(): MapOL;
+    private map?;
+    private createMap;
+    getMap(): OlMap;
     /**
      * @returns an array of BaseLayer objects that should be printed and that are not in the layer tree.
      */

package/tools/state/mapManager.js

@@ -1,37 +1,46 @@
 import GirafeSingleton from '../../base/GirafeSingleton.js';
-import MapOL from 'ol/Map.js';
+import OlMap from 'ol/Map.js';
 import { defaults as defaultControls } from 'ol/control/defaults.js';
 import { defaults as defaultInteractions } from 'ol/interaction/defaults.js';
 import { DragPan } from 'ol/interaction.js';
+import { Kinetic } from 'ol';
 /** The singleton containing the main OpenLayers map accessible from everywhere */
 export default class MapManager extends GirafeSingleton {
-    map = new MapOL({
-        controls: defaultControls({
-            rotate: !this.context.stateManager.state.interface.isMobile,
-            zoom: !this.context.stateManager.state.interface.isMobile
-        }),
-        layers: [],
-        interactions: defaultInteractions({ dragPan: false }).extend([
-            /** Make Map pan on Wheel/Middle-Button Click */
-            new DragPan({
-                condition: function (mapBrowserEvent) {
-                    const event = mapBrowserEvent.originalEvent;
-                    return event.isPrimary && event.button < 2 && !event.shiftKey;
-                }
-            })
-        ])
-    });
+    map;
+    createMap() {
+        const interactions = defaultInteractions({ dragPan: false });
+        interactions.push(new DragPan({
+            condition: function (mapBrowserEvent) {
+                const event = mapBrowserEvent.originalEvent;
+                return event.isPrimary && event.button < 2 && !event.shiftKey;
+            },
+            kinetic: new Kinetic(-0.005, 0.05, 100)
+        }));
+        this.map = new OlMap({
+            controls: defaultControls({
+                rotate: !this.context.stateManager.state.interface.isMobile,
+                zoom: !this.context.stateManager.state.interface.isMobile
+            }),
+            layers: [],
+            interactions: interactions
+        });
+    }
     getMap() {
+        if (!this.map) {
+            this.createMap();
+        }
         return this.map;
     }
     /**
      * @returns an array of BaseLayer objects that should be printed and that are not in the layer tree.
      */
     getLayersToPrint() {
-        return this.map.getAllLayers().filter((layer) => layer.get('addToPrintedLayers'));
+        return this.getMap()
+            .getAllLayers()
+            .filter((layer) => layer.get('addToPrintedLayers'));
     }
     zoomToExtent(extent, minResolution) {
-        this.map.getView().fit(extent, {
+        this.getMap().getView().fit(extent, {
             minResolution: minResolution
         });
     }

package/tools/themes/themeshelper.d.ts

@@ -3,6 +3,10 @@ import BaseLayer from '../../models/layers/baselayer.js';
 import GroupLayer from '../../models/layers/grouplayer.js';
 import Layer from '../../models/layers/layer.js';
 import ThemeLayer from '../../models/layers/themelayer.js';
+export type LayerTreeChanges = {
+    insertedLayers: BaseLayer[];
+    activatedLayers: BaseLayer[];
+};
 export default class ThemesHelper extends GirafeSingleton {
     initializeSingleton(): void;
     private get state();
@@ -32,7 +36,7 @@ export default class ThemesHelper extends GirafeSingleton {
      * This prevents themes of visibly "jumping" around in the tree after being added due to reordering.
      */
     getInitialOrderForNewTheme(): number;
-    mergeThemeInLayerTree(theme: ThemeLayer, activate?: boolean, forceTop?: boolean): BaseLayer[];
+    mergeThemeInLayerTree(theme: ThemeLayer, activate?: boolean, forceTop?: boolean): LayerTreeChanges;
     /**
      * This function merges the newLayer at its right place in the LayerTree
      * @param newLayer The layer to insert somewhere in the hierarchy
@@ -41,6 +45,8 @@ export default class ThemesHelper extends GirafeSingleton {
      * @returns
      */
     private mergeLayerWithExistingLayerTree;
+    private highlightLayerInLayerTree;
+    private addLayerToLayerTree;
     removeLayersFromLayerTree(layersToRemove: BaseLayer[]): void;
     private removeLayersFromExistingLayerTree;
     /**

package/tools/themes/themeshelper.js

@@ -116,7 +116,17 @@ export default class ThemesHelper extends GirafeSingleton {
         const clonedTheme = theme.clone();
         const themeAlreadyInLayersList = this.state.layers.layersList.find((l) => l.id == clonedTheme.id);
         if (themeAlreadyInLayersList) {
-            console.info(`The theme ${clonedTheme.name} is already present in the treeview.`);
+            themeAlreadyInLayersList.isHighlighted = true;
+            const layername = this.context.i18nManager.getTranslation(clonedTheme.name);
+            const msg = this.context.i18nManager
+                .getTranslation('The theme {name} is already present in the treeview.')
+                .replace('{name}', layername);
+            this.state.infobox.elements.push({
+                id: theme.treeItemId,
+                text: msg,
+                type: 'info',
+                duration: 5000
+            });
             return;
         }
         if (this.context.configManager.Config.themes.selectionMode === 'replace') {
@@ -131,14 +141,14 @@ export default class ThemesHelper extends GirafeSingleton {
         }
         const themeFunctionalities = this.state.themes._allFunctionalities[theme.id];
         if (themeFunctionalities) {
-            Object.keys(themeFunctionalities).forEach((functionality) => {
+            for (const functionality of Object.keys(themeFunctionalities)) {
                 if (KNOWN_FUNCTIONALITIES.includes(functionality)) {
                     this.state.functionalities[functionality] = themeFunctionalities[functionality];
                 }
                 else {
                     console.warn(`Unknown functionality '${functionality}' found on Theme '${theme.name}'.`);
                 }
-            });
+            }
         }
     }
     getMinimalClonedThemeForLayer(layer) {
@@ -152,6 +162,10 @@ export default class ThemesHelper extends GirafeSingleton {
             children[0].isExpanded = true;
             children = children[0].children;
         }
+        const clonedLayer = this.findBaseLayerRecursiveById([clone], layer.id);
+        if (clonedLayer) {
+            clonedLayer.isHighlighted = true;
+        }
         return clone;
     }
     removeOthers(layers, keep) {
@@ -316,13 +330,9 @@ export default class ThemesHelper extends GirafeSingleton {
     }
     mergeThemeInLayerTree(theme, activate = false, forceTop = false) {
         theme.order = forceTop ? -1 : this.getInitialOrderForNewTheme();
-        const insertedLayers = this.mergeLayerWithExistingLayerTree(theme, this.state.layers.layersList);
-        if (activate) {
-            for (const insertedLayer of insertedLayers) {
-                this.context.layerManager.toggle(insertedLayer, 'on');
-            }
-        }
-        return insertedLayers;
+        const layerTreeChanges = { insertedLayers: [], activatedLayers: [] };
+        this.mergeLayerWithExistingLayerTree(theme, this.state.layers.layersList, activate, layerTreeChanges);
+        return layerTreeChanges;
     }
     /**
      * This function merges the newLayer at its right place in the LayerTree
@@ -331,25 +341,47 @@ export default class ThemesHelper extends GirafeSingleton {
      * @param parent
      * @returns
      */
-    mergeLayerWithExistingLayerTree(newLayer, existingList, parent) {
+    mergeLayerWithExistingLayerTree(newLayer, existingList, activate = false, layerTreeChanges, parent) {
         const existingLayer = existingList.find((l) => l.id === newLayer.id);
         if (!existingLayer) {
             // The theme is not already present. We just add the theme to the layertree
-            if (parent) {
-                newLayer.parent = parent;
-            }
-            existingList.push(newLayer);
-            return [newLayer];
+            this.addLayerToLayerTree(newLayer, existingList, activate, layerTreeChanges, parent);
+            return;
+        }
+        else if (newLayer.isHighlighted) {
+            this.highlightLayerInLayerTree(existingLayer, activate, layerTreeChanges);
         }
         // Otherwise, we have to merge the themes
-        const insertedLayers = [];
         if ((newLayer instanceof ThemeLayer || newLayer instanceof GroupLayer) &&
             (existingLayer instanceof ThemeLayer || existingLayer instanceof GroupLayer)) {
             for (const child of newLayer.children) {
-                insertedLayers.push(...this.mergeLayerWithExistingLayerTree(child, existingLayer.children, existingLayer));
+                this.mergeLayerWithExistingLayerTree(child, existingLayer.children, activate, layerTreeChanges, existingLayer);
             }
         }
-        return insertedLayers;
+    }
+    highlightLayerInLayerTree(existingLayer, activate, layerTreeChanges) {
+        existingLayer.isHighlighted = true;
+        if (existingLayer.parent) {
+            existingLayer.parent.isExpanded = true;
+        }
+        if (activate && existingLayer.inactive) {
+            this.context.layerManager.toggle(existingLayer, 'on');
+            if (layerTreeChanges) {
+                layerTreeChanges.activatedLayers.push(existingLayer);
+            }
+        }
+    }
+    addLayerToLayerTree(newLayer, existingList, activate = false, layerTreeChanges, parent) {
+        if (parent) {
+            newLayer.parent = parent;
+        }
+        existingList.push(newLayer);
+        if (activate) {
+            this.context.layerManager.toggle(newLayer, 'on');
+        }
+        if (layerTreeChanges) {
+            layerTreeChanges.insertedLayers.push(newLayer);
+        }
     }
     removeLayersFromLayerTree(layersToRemove) {
         for (const layerToRemove of layersToRemove) {