Calling map.allLayers removes all layers.

[TristanSebens]

I've run into an interesting quirk in my code and I'm trying to track down the source of it. In my application I have about 40 layers, any combination of which can be displayed at one time as 3d polylines. What I want to do is implement a legend widget by adding all of the layers to a group layer, and then using that group layer as the basis for my legend widget.

Here's my function to accomplish that:

function createLegend() {
   var legend = new Legend({
      view: view,
      layerInfos: [{
      layer: new GroupLayer({
         layers: map.allLayers;
       }),
       title: "Layer Legend"
    }]
});

// Add widget to the bottom left corner of the view
view.ui.add(legend, "bottom-left");
}

The interesting thing is this: as soon as I call map.allLayers, all of the layers disappear from the map. I have a layer list in the app, and it goes from full to empty instantaneously once the call is made. I even set a time delay on the function call: all of the layers remain in the map until map.allLayers gets called.

I put in a console.log( map ) statement before and after map.allLayers gets called, and sure enough the layers are there before the call, and gone after.

I'm wondering if anyone else has faced this kind of thing, and what I might do about it.

[ThomasSolow]

Off the top of my head, you might try using map.layers as opposed to map.allLayers.  The main difference between those two is that map.allLayers includes the basemap layers.

In general though, it's not obvious to me that your method would work.  You aren't adding the group layer to the map, and the legend widget only shows up for layers that are in the current view.  Also, I'm not sure if the legend widget can handle group layers at all.

I think, unfortunately, you might just be stuck having a legend that with layers infos that look like this:

function createLegend() { 
   
   var infos = map.layers.map(lyr => {
     return {
       layer: lyr,
       title: lyr.title
     };
   }).toArray();

   var legend = new Legend({
      view: view,
      layerInfos: infos
});
// Add widget to the bottom left corner of the view
view.ui.add(legend, "bottom-left");
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Tristan,

   The docs say this:

A layer may only be added to one parent. Adding the same layer to multiple Maps or GroupLayers is not possible. If you attempt to do so, the layer will automatically be removed from its current parent and placed in the new parent.

So when adding then to the group layer you are removing them from the map and adding them only to the legend. I would think that you some how have to duplicate the layers before you add them to the GroupLayer and then the Legend.

[TristanSebens]

Ah ha! The smoking gun. I've since moved away from this style of implementation, since the return was simply not worth the trouble it caused. Thanks for solving the mystery though!