Hi, I'm using the LayerList Widget. It seems I can only detect "trigger-action".
How can I detect when a layer panel has been selected or clicked without using actionsSections?
I just want to detect the event when I click on the panel header.
Cheers
Solved! Go to Solution.
Hi @mukecz1 ,
Thanks for posting your question. You can use reactiveUtils to watch for property changes in the LayerList widget. The API tends to avoid having lots of events in favor of responding to property changes with reactiveUtils.
I wrote this codepen that shows how to respond to selection and visibility changes in the LayerList widget, and there are a couple snippets from it below.
You can watch the `selectedItems` property and respond when the collection is modified
// Console log the selected items titles when selectedItems changes
reactiveUtils.watch(
() => layerList.selectedItems.map(item => item.title),
(itemTitles) => itemTitles.forEach((itemTitle) => {
console.log(`${itemTitle} (selected)`)
})
)
Or, if you are interested in when a layers visibility changes you can watch the maps layers collection filtered by visible layers and respond.
// Console log the collection of visible layers titles when a layer's visiblity changes
reactiveUtils.watch(
() => view.map.layers.filter(layer => layer.visible),
(visibleLayers) => visibleLayers.forEach((visibleLayer) => {
console.log(`${visibleLayer.title} (visible)`)
})
)
Hi @mukecz1 ,
Thanks for posting your question. You can use reactiveUtils to watch for property changes in the LayerList widget. The API tends to avoid having lots of events in favor of responding to property changes with reactiveUtils.
I wrote this codepen that shows how to respond to selection and visibility changes in the LayerList widget, and there are a couple snippets from it below.
You can watch the `selectedItems` property and respond when the collection is modified
// Console log the selected items titles when selectedItems changes
reactiveUtils.watch(
() => layerList.selectedItems.map(item => item.title),
(itemTitles) => itemTitles.forEach((itemTitle) => {
console.log(`${itemTitle} (selected)`)
})
)
Or, if you are interested in when a layers visibility changes you can watch the maps layers collection filtered by visible layers and respond.
// Console log the collection of visible layers titles when a layer's visiblity changes
reactiveUtils.watch(
() => view.map.layers.filter(layer => layer.visible),
(visibleLayers) => visibleLayers.forEach((visibleLayer) => {
console.log(`${visibleLayer.title} (visible)`)
})
)
Thanks, it is what i'm looking for