From 79d60d09958dd09e44c4f8b72d342ab35bcac7c8 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Fri, 28 Mar 2025 15:56:28 +0100
Subject: [PATCH] fix: update datalayers switcher when datalayer visibility
 changes

Co-authored-by: David Larlet <david@larlet.fr>
---
 umap/static/umap/js/modules/data/layer.js | 10 ++++++++--
 umap/static/umap/js/modules/ui/bar.js     | 10 +++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/umap/static/umap/js/modules/data/layer.js b/umap/static/umap/js/modules/data/layer.js
index 61e2dc8a..f7d1cdd7 100644
--- a/umap/static/umap/js/modules/data/layer.js
+++ b/umap/static/umap/js/modules/data/layer.js
@@ -966,12 +966,18 @@ export class DataLayer extends ServerStored {
     this.propagateHide()
   }
 
-  toggle(status) {
+  toggle(force) {
     // From now on, do not try to how/hidedataChanged
     // automatically this layer.
+    let display = force
     this._forcedVisibility = true
-    if (!this.isVisible() || status) this.show()
+    if (force === undefined) {
+      if (!this.isVisible()) display = true
+      else display = false
+    }
+    if (display) this.show()
     else this.hide()
+    this._umap.bottomBar.redraw()
   }
 
   zoomTo() {
diff --git a/umap/static/umap/js/modules/ui/bar.js b/umap/static/umap/js/modules/ui/bar.js
index 6e42a4dc..d973fca1 100644
--- a/umap/static/umap/js/modules/ui/bar.js
+++ b/umap/static/umap/js/modules/ui/bar.js
@@ -193,6 +193,7 @@ export class BottomBar extends WithTemplate {
     this.elements.layers.addEventListener('change', () => {
       const select = this.elements.layers
       const selected = select.options[select.selectedIndex].value
+      if (!selected) return
       this._umap.eachDataLayer((datalayer) => {
         datalayer.toggle(datalayer.id === selected)
       })
@@ -209,16 +210,23 @@ export class BottomBar extends WithTemplate {
     this.elements.caption.hidden = !showMenus
     this.elements.browse.hidden = !showMenus
     this.elements.filter.hidden = !showMenus || !this._umap.properties.facetKey
+    this.buildDataLayerSwitcher()
+  }
+
+  buildDataLayerSwitcher() {
     this.elements.layers.innerHTML = ''
     const datalayers = this._umap.datalayersIndex.filter((d) => d.options.inCaption)
     if (datalayers.length < 2) {
       this.elements.layers.hidden = true
     } else {
+      this.elements.layers.appendChild(Utils.loadTemplate(`<option value=""></option>`))
       this.elements.layers.hidden = false
+      const visible = datalayers.filter((datalayer) => datalayer.isVisible())
       for (const datalayer of datalayers) {
+        const selected = visible.length === 1 && datalayer.isVisible() ? 'selected' : ''
         this.elements.layers.appendChild(
           Utils.loadTemplate(
-            `<option value="${datalayer.id}">${datalayer.getName()}</option>`
+            `<option value="${datalayer.id}" ${selected}>${datalayer.getName()}</option>`
           )
         )
       }