Listed to Map Layers visibility

[JonathanAttard]

Hello,

I'm currently facing some challenges related to monitoring changes in layer visibility within map layers and custom widgets I've developed.

I've discovered that I can access the '__esri.LayerList' to interact with the visibility function for the layers within my map layers widget. However, I'm encountering issues with implementing the visibility toggle, as it seems to override the normal function. Additionally, I'm struggling with identifying which specific layer was selected for showing or hiding.

    this.layerList._toggleVisibility = function (pointerEvent: PointerEvent) {
      console.log(pointerEvent) 
    }

 I'd greatly appreciate any recommendations or insights on how to effectively track changes in layer visibility.

Thank you in advance for your help!

[JeffreyThompson2]

You could do something with the reactiveUtils.watch() method.

https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html

//Assume I have previously stored mapView to a variable.
mapView.view.map.allLayers.map(layer => {
  reactiveUtils.watch(layer.visible, (layer) => {
    console.log(layer)
  }
}

Something like this should set up an event listener to run anytime a layer changes it's visibility and log what layer changed.

[JonathanAttard · Accepted solution]

Thanks for your suggestion, but I'm still facing issues with monitoring changes in layer visibility. Unfortunately, when I implemented the solution you provided, nothing happened. Here's the code I tried:

// Import
import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";

// Attempted function
onActiveViewChange = (activeView: JimuMapView, previousActiveViewId: string) => {
    // Watching for changes within a collection
    reactiveUtils.watch(
      () => activeView.view.map.allLayers.map(layer => layer.visible),
      (visible) => {
        console.log(`FeatureLayer visible ${visible}`);
      });
  }

// Within the render
<JimuMapViewComponent onActiveViewChange={this.onActiveViewChange} />

I have tried implementing this code with different instances of 'JimuMapView', as well as within both Map and Map Layers Widgets. It's worth mentioning that I am working with an ArcGIS Web Map and not creating my own layers from scratch.

Update:

Managed to make it work using the solution from this post: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/handle-listen-layer-visibility-ev...

layer.watch('visible', (visibility, a, eventName,layer) => {
                console.log("visible: ", visibility);
                console.log(layer, eventName, a);
            });

[JeffreyThompson2]

I'm glad you found a solution, but for your future knowledge onActiveViewChange() probably doesn't work the way you think it works. The onActiveViewChange function only fires when the mapView changes, as in the entire jimuMapView object is replaced with a different jimuMapView object. In your code, the event listener would likely never be set up.