How can I detect when a layer panel has been selected or clicked?

Question

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

Sage_Wall · Accepted Answer

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