Capture show hide event of layerlist ArcGIS Javascript

[aggarwalarpit93]

Hello, I have a map in which I have added a feature layer and it shows in the LayerList on the top right corner.

Now what I want is, I want to capture the event whenever I show or hide this layer from the LayerList so that according to this I can do things.

Here is the sample code what I have tried so far.

<script>
        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/Basemap",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/symbols/PictureMarkerSymbol",
            "esri/layers/support/LabelClass",
            "esri/rest/support/Query",
            "esri/geometry/Point",
            "esri/views/layers/LayerView",
            "esri/rest/locator",
            "esri/geometry/Polygon",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/widgets/LayerList",
            "esri/widgets/Expand",
        ], (esriConfig, Map, MapView, FeatureLayer, Basemap, Graphic, GraphicsLayer, PictureMarkerSymbol, LabelClass, Query, Point, LayerView, locator, Polygon, SimpleLineSymbol, SimpleFillSymbol, LayerList, Expand) => {

            esriConfig.apiKey= API_KEY;

            const map = new Map();

            // const map = new Map({
            //     basemap: "arcgis-topographic" // Basemap layer
            // });

            const view = new MapView({
                map: map,
                center: [85.7780685, 25.8560264],
                scale: 1800000,
                container: "viewDiv",
                constraints: {
                    snapToZoom: false
                }
            });

            // District feature layer
            // Add district layer custom layout
            const districtLayerBorderLayout = {
                type: "simple",
                symbol: {
                    type: "simple-line",
                    style: "short-dot",
                    color: "#000000",
                    width: "1px"
                }
            };

            const districtLayerTextLayout = new LabelClass({
                symbol: {
                    type: "text",
                    color: "#ff00ff",
                    font: {
                        size: 10
                    }
                },
                labelExpressionInfo: {
                    expression: "$feature.D_NAME"
                }
            });

            // Add district layer to the mapview
            const districtLayer = new FeatureLayer({
                url: "https://gis.fmiscwrdbihar.gov.in/arcgis/rest/services/GisAtlas/GIS_Atlas_2023/MapServer/22",
                outFields:["*"],
                renderer: districtLayerBorderLayout,
                labelingInfo: [districtLayerTextLayout]
            });
            map.add(districtLayer, 0);

            // layer list widget
            ////////////////////////// Add legend //////////////////////////
            const layerList = new LayerList({
                view: view
            });

            const layerListExpand = new Expand({
                expandIconClass: "esri-icon-layers",
                expandTooltip: "LayerList",
                view: view,
                expanded: false,
                content: layerList,
                group: "expandable-widgets"
            });

            view.ui.add([layerListExpand], "top-right")

        });
    </script>

[Sage_Wall]

Hi @aggarwalarpit93 , thanks for posting.  I'd suggest using the reactiveUtils watch method to do this.  This would allow you to watch for changes in the layer's visible property and then respond.  I modified your original example in this codepen : 

reactiveUtils.watch(
  // getValue function
  () => districtLayer.visible,
  // callback
  (visible) => {
    visible ? console.log("The district layer is visible") : console.log("The district layer is not visible")
  });
});