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 ,

Can you please provide a codepen or example of the issue you are seeing?  The LayerList is designed to automatically update when an operational layer is added or removed from the map.  You shouldn't need to do anything.  I modified our Intro to FeatureLayer by adding a timeout that removes the layer after 5 seconds and things are working as intended.  Are you using a different layer class?  How are you removing the layer that isn't being removed from the LayerList?

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

[Aeseir]

That is weird. Pretty much same setup.

This works for top level items.

const layerList = new LayerList({
view: this.view,
listItemCreatedFunction: onListItemCreation()
});

layerList.on("trigger-action", (event: any) => {
if(event.action.id === "delete-layer") {
const layer = this.view?.map.findLayerById(event.item.layer.id);

if(layer) this.view.map.remove(layer);
}
});

But this doesn't work when the layer is a child layer of a Grouplayer, e.g.

const groupLayer = new GroupLayer(options);

const featureLayer = new FeatureLayer(options);

groupLayer.layers.add(featureLayer);

// assume featureLayer ID = 1 for this purpose
const featureLayerToDelete = this.view.map.findLayerById(1);
this.view.map.layers.remove(featureLayerToDelete);
//this deletes it but doesn't update the listlayer widget

[Sage_Wall · Accepted solution]

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

[Aeseir]

Gotcha, essentially the owner of the layer is not the GroupLayer. This makes sense and it works fine.