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

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"));
  }
);