fix: update datalayers switcher when datalayer visibility changes

Co-authored-by: David Larlet <david@larlet.fr>
This commit is contained in:
Yohan Boniface 2025-03-28 15:56:28 +01:00
parent 953b37a181
commit 79d60d0995
2 changed files with 17 additions and 3 deletions

View file

@ -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() {

View file

@ -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>`
)
)
}