nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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!

Encontre mais publicações marcadas com

ArcGIS Enterprise

Accepted answers

JonathanAttard

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-events/m-p/1275671

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

All comments

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.

JonathanAttard

// 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} />

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-events/m-p/1275671

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

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.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.