nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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!

checkboxes.png

Find more posts tagged with

Accepted answers

All comments

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!

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}`)
})

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!

TimDietz

Paco, looking at https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html#properties-summary, 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

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

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.