diff --git a/umap/static/umap/css/bar.css b/umap/static/umap/css/bar.css
index 5df3bd87..444a6480 100644
--- a/umap/static/umap/css/bar.css
+++ b/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);
diff --git a/umap/static/umap/js/modules/ui/bar.js b/umap/static/umap/js/modules/ui/bar.js
index d7bf77de..32f64e0c 100644
--- a/umap/static/umap/js/modules/ui/bar.js
+++ b/umap/static/umap/js/modules/ui/bar.js
@@ -167,6 +167,7 @@ const BOTTOM_BAR_TEMPLATE = `
+
`
@@ -189,6 +190,17 @@ 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) => {
+ if (datalayer.id === selected) {
+ datalayer.show()
+ } else {
+ datalayer.hide()
+ }
+ })
+ })
this.redraw()
}
@@ -201,6 +213,14 @@ 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) => {
+ this.elements.layers.appendChild(
+ Utils.loadTemplate(
+ ``
+ )
+ )
+ })
}
}