Layerlist selected item becomes visible watch

[GregoryBologna]

I have visibility watches on a layerList, but I cannot get the watches to hit on the items in the layerList when an item is selected. I want to get the visible item index when the item is chosen in item.layer.layers.items.

I can output the items in a forEach inside the listItemCreatedFunction, but I need to use a watch.

layerListExpand = new Expand({
content: (layerList = new LayerList({
  view: view,
  listItemCreatedFunction: (event) => {
	let item = event.item;
	let key = item.title.toUpperCase().replace(/ /g, '');
	if (item.layer.type === 'group' || item.layer.type === 'tile') {
	  if (key === 'AERIALS') {

		item.layer.layers.items?.forEach((item) => {
		  console.log(item.title, item.visible);
		});

reactiveUtils.when doesn't get hit for item.layer.layers.item

reactiveUtils.when(
  () => item.layer.layers.items,  // I was selected and visible,
  (visible) => {
     // do something here
	if (visible) console.log('visible');
  }
);

[Sage_Wall · Accepted solution]

Hi @GregoryBologna ,

reactiveUtils when will only check for truthy values.  You would want to use a watch.   items isn't part of the public API.  You might run into issues.  This will also create a watch and a handle for each list item maybe unnecessarily?  Not sure on the use case here exactly.

What I would suggest is set up a single watch on map.allLayers something like this.  You could expand the filter logic to include only certain layers or layer types if necessary.

// Watching for changes to the visible layers in the Map
reactiveUtils.watch(
  () => view.map.allLayers.filter((layer) => layer.visible),
  (newVisibleLayers, oldVisibleLayers) => {
    const added = newVisibleLayers.filter(
      (layer) => !oldVisibleLayers.includes(layer)
    );
    const removed = oldVisibleLayers.filter(
      (layer) => !newVisibleLayers.includes(layer)
    );
    added.forEach((layer) => console.log(layer.title, "is visible"));
    removed.forEach((layer) => console.log(layer.title, "is not visible"));
  }
);

[GregoryBologna]

I didn't even think about using at allLayers. Thank you. 

Here's how it turned out. Works just right.

                // Watching for changes to the visible year layers in the Map 
                reactiveUtils.watch(
                  () => view.map.allLayers.filter((layer) => layer.visible),
                  (newVisibleLayers, oldVisibleLayers) => {
                    const added = newVisibleLayers.filter((layer) => !oldVisibleLayers.includes(layer));
                    const addedIndices = added.map((layer) => map.allLayers.findIndex((l) => l === layer));
                    // Destructure with a default value
                    const [yearChosenIndex = null] = addedIndices;
                    chosenPriorYearMapLayer = [];
                    if (yearChosenIndex >= 0)
                      chosenPriorYearMapLayer.push(yearChosenIndex);    
                  }
                );