Accessing layers from WebMap

[Paco]

Hello All.   I have previously added FeatureLayers individually and used some level of document.getElementById and addEventListener('click') to turn those FeatureLayers on and off using an html Checkbox.

But,  I am now using an AGOL hosted WebMap to draw the content in my app, and trying to use the Calcite 'checkbox' to toggle my WebMap layers on and off?  and I cannot figure out how to access those individual layers in the WebMap and how to use the Calcite checkbox component to turn them on and off.

I have no trouble adding the Calcite Components(checkbox, slider, etc) but just don't know how to relate them back to my layers within my WebMap.   is it a getLayers All or Find item by ID thing?  accessing the data in a WebMap is new to me.   thanks!

[TimDietz]

The layers property of the WebMap contains a collection of all layers within the WebMap.

https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html#layers

        webMap.layers.forEach((layer) => {
          // Do whatever with each layer
        });

[Paco]

Great,  thanks Tim that helps.  so getting a specific map layer can be accomplished by the layer "name" or it's layer "id"?  can I get layer GROUPS?  

I was attempting a similar getLayers property using the WebMap layer "id" number but was returning null in the Console.  im sure I was doing something wrong in the syntax.   I wanted to be sure of where to get the correct WebMap layer "id" as well,  im just copying it from the end of the WebMap/Feature Layer URL.  not sure if that's correct.   thanks

[TimDietz]

Paco, looking at https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html#properties-summ... layers have id and title (not name). 

Regarding Groups, I see that the layers may have a parent and that parent may be part of a GroupLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GroupLayer.html.

I'm assuming that the layers either need to be grouped by you or whomever provided the WebMap.

[Paco]

Still having trouble accessing any layers within an existing WebMap.

I can add my ENTIRE WebMap using the "portalItem:",  and I can add a Group within that WebMap using "Layer.fromPortalItem",  but I cannot seem to get access to those new variables for simple things like turning layer visibility on and off??

I really would like to use my WebMap for the many Arcade expressions(popups) and Styling I already have in the WebMap.   I tested using FeatureLayers of the same data and have no problems.  but working with the WebMap seems to still give me problems.   anybody else working with WebMaps in their applications?  thankyou!

[D_Atkins]

Two years later and we're observing similar behavior.  We're using the new <arcgis-map> component and portalItem which is great for maintenance of the symbology, display fields, and popups...  it's a great abstraction from line-by-line definitions of basic maps, but now we're having trouble accessing basic properties.  

As the original post: if we manually add FeatureLayers things work as expected and the properties are easily accessible (including visibility and such within the client-side map).   And, layers added individually to our WebMap PortalItem are also returned by map.allLayers and the like. 

Our problem is (as it seems above) that we've packaged our own Enterprise-referenced data into a single MapImageLayer, but then from the Javascript side, map.allLayers returns only the 'MapServiceLayer' with none of the sublayers... 

[Sage_Wall]

This can be tricky as you may need to wait for both the web map and the layers to load. Are you waiting for the loadAll method on the MapImageLayer?

await viewElement.viewOnReady();
await viewElement.map.loadAll();
await mapImageLayer.loadAll();

const allLayersAndSublayers = viewElement.map.allLayers.flatten((layer) => {
  return layer.layers || layer.sublayers;
});

allLayersAndSublayers.forEach((layer) => {
  console.log(`${layer.title} - ${layer.type}`)
})

[D_Atkins]

Thanks Sage_Wall!       Our legacy work was using lots of '.layer' and had never even considered a .sublayer property!  (Of course, this snippet would be front and center on the Collection documentation, under flatten.)  This at least gets us to the id/title of the Group Layers within the MapImageLayer...  but while the documentation says flatten is recursive, we're still not seeing properties for the sub-sublayers (for lack of a better term).  We also have Groups nested within Groups, so will need to step down at least two more levels in the layer-tree.

In any case, this is a big push forward, for now!