Update LayerList widget on changes

Aeseir

I am trying to figure out how to update the LayerList widget in v4 when a layer is removed from the map.

 

I cannot find any material on refreshing it or updating it on documentation.

 

Currently a layer can be removed, but still sit in the LayerList view, confusing the user.

Sage_Wall

Hi @Aeseir , Sorry for the delay in responding.

I'm having a little trouble replicating this behavior you describe.  When I try the same thing, adding a feature layer into a group layer then try and remove the feature layer, nothing happens. It's not removed from the map and still is present in the LayerList.

https://codepen.io/sagewall/pen/dygXvyv

This is because after adding the feature layer to the group layer, the original feature layer is no longer an operational layer in the map, its a sublayer in the group layer. To remove the feature layer from the group layer you can use the GroupLayer.remove() method as shown here and things should work as expected.

https://codepen.io/sagewall/pen/abRZJZZ

require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/LayerList", "esri/layers/GroupLayer"], (Map, MapView, FeatureLayer, LayerList, GroupLayer) => {

      const map = new Map({
        basemap: "hybrid"
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        extent: {
          xmin: -9177811,
          ymin: 4247000,
          xmax: -9176791,
          ymax: 4247784,
          spatialReference: 102100
        }
      });

      const layerList = new LayerList({
        view
      })
      view.ui.add(layerList, "bottom-right")

      const featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
      });

      const groupLayer = new GroupLayer();
      groupLayer.add(featureLayer);
      map.add(groupLayer);

      // // this doesn't work as featureLayer is now a sublayer of groupLayer
      // setTimeout(() => {
      //   console.log("Delayed for 5 seconds.");
      //   map.remove(featureLayer)
      // }, "5000");

      // remove the feature layer from the group layer after 5 seconds
      setTimeout(() => {
        console.log("Delayed for 5 seconds.");
        groupLayer.remove(featureLayer)
      }, "5000");

      // then remove the group layer entirely after 10 seconds
      setTimeout(() => {
        console.log("Delayed for 5 seconds.");
        map.remove(groupLayer)
      }, "10000");
    });