Merge ac4339e140 into be83eddbd0

umap/static/umap/css/bar.css

@@ -166,7 +166,8 @@
 .umap-caption-bar button {
     margin-inline-start: 10px;
 }
-.umap-caption-bar button + button:before {
+.umap-caption-bar > button + select:before,
+.umap-caption-bar > button + button:before {
     content: '|';
     padding-inline-end: 10px;
 }
@@ -196,7 +197,14 @@
     z-index: var(--zindex-panels);
 }
 .umap-caption-bar-enabled .umap-caption-bar {
-    display: block;
+    display: flex;
+    align-items: baseline;
+}
+.umap-caption-bar select {
+    margin-top: 0;
+    line-height: initial;
+    height: initial;
+    width: auto;
 }
 .umap-caption-bar-enabled {
     --current-footer-height: var(--footer-height);

umap/static/umap/js/modules/data/layer.js

@@ -960,11 +960,11 @@ export class DataLayer extends ServerStored {
     this.propagateHide()
   }
 
-  toggle() {
+  toggle(status) {
     // From now on, do not try to how/hidedataChanged
     // automatically this layer.
     this._forcedVisibility = true
-    if (!this.isVisible()) this.show()
+    if (!this.isVisible() || status) this.show()
     else this.hide()
   }
 
@@ -1252,7 +1252,7 @@ export class DataLayer extends ServerStored {
         this
       )
     }
-    DomEvent.on(toggle, 'click', this.toggle, this)
+    DomEvent.on(toggle, 'click', () => this.toggle())
     DomEvent.on(zoomTo, 'click', this.zoomTo, this)
     container.classList.add(this.getHidableClass())
     container.classList.toggle('off', !this.isVisible())

umap/static/umap/js/modules/ui/bar.js

@@ -167,6 +167,7 @@ const BOTTOM_BAR_TEMPLATE = `
     <button class="umap-about-link flat" type="button" title="${translate('Open caption')}" data-ref="caption">${translate('Open caption')}</button>
     <button class="umap-open-browser-link flat" type="button" title="${translate('Browse data')}" data-ref="browse">${translate('Browse data')}</button>
     <button class="umap-open-browser-link flat" type="button" title="${translate('Filter data')}" data-ref="filter">${translate('Filter data')}</button>
+    <select data-ref=layers></select>
   </div>
 `
 
@@ -189,6 +190,13 @@ export class BottomBar extends WithTemplate {
       this._umap.openBrowser('filters')
     )
     this._slideshow.renderToolbox(this.element)
+    this.elements.layers.addEventListener('change', () => {
+      const select = this.elements.layers
+      const selected = select.options[select.selectedIndex].value
+      this._umap.eachDataLayer((datalayer) => {
+        datalayer.toggle(datalayer.id === selected)
+      })
+    })
     this.redraw()
   }
 
@@ -201,6 +209,15 @@ 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.elements.layers.innerHTML = ''
+    this._umap.eachDataLayer((datalayer) => {
+      if (!datalayer.options.inCaption) return
+      this.elements.layers.appendChild(
+        Utils.loadTemplate(
+          `<option value="${datalayer.id}">${datalayer.getName()}</option>`
+        )
+      )
+    })
   }
 }