Where should I place the layerList.multipleSelectionEnabled=false; property in ArcGIS Maps SDK for JavaScript 4.x?

[GroundworkORVGIS]

I am trying to create a web application that allows users to explore layers related to climate safe neighborhoods. When I asked some of my colleagues to try an out of the box template from ArcGIS Online, they had difficulty understanding that they need to turn off layers above the layer they want to see to view it. I want to code a map that only allows users to select one layer at a time, so this doesn't happen, and I also want the legends to show with the layer list item. There's a solution on Stack Overflow that allows only one layer selection at a time that I found on this site, but it doesn't also show the legend, and it uses an older version of the API which I am not familiar with Single layer visible in LayerList widget (ArcGIS JavaScript).

Most of my data is Choropleth, so the layers cover each other even when I lower their opacity. I located an html file I created from my web mapping course in college, and I've been trying to modify it to allow only one selection at a time within the layerList. Once I figure that out, I want to apply that code to my Climate Safe Neighborhoods Map. The API documentation says to add the following code, but it doesn't say where.

layerList.selectionEnabled = true;

layerList.multipleSelectionEnabled = false;

I assumed these are attributes of the object so I added them here with no luck.

full html file

I also tried adding the API documentation suggested code after the constant was created, and that didn't work. Thank you to anyone who can help me out with this. I am new to coding, and I have never done anything this complex.

[Sage_Wall · Accepted solution]

Hi @GroundworkORVGIS ,

Thanks so much for adding the link to your html code it really helps.  I took a look and it looks like there were some issues with the AMD imports, it is important to keep the module references and callback parameters in the same order.  I created a codepen from your html file and after modifying the imports it seems to work as expected. You were adding the selectionEnabled and multipleSelectionEnabled properties in the correct location.  They are both properties of LayerList, but I think there may be a little confusion on what these properties do.

These selection properties do not control the visibility of layers but allow the list items in the layer list to be selected.  Selected items may be reordered in the LayerList  by dragging gestures with the mouse or touch screen, or with arrow keys on the keyboard and can be accessed with the selectedItems property for other custom workflows.  Unfortunately there isn't an out of the box property on LayerList to allow for only one visible layer at a time.

You can however use a GroupLayer with the visibilityMode set to "exclusive".   Your LayerList would contain the one GroupLayer that would contain all your other layers and only allow for one of them to be visible at a time. This sample shows how to do that and the relevant code snippet is below

 const demographicGroupLayer = new GroupLayer({
  title: "US Demographics",
  visible: true,
  visibilityMode: "exclusive",
  layers: [USALayer, censusLayer],
  opacity: 0.75
});

[GroundworkORVGIS]

Thank you so much for your response. I have tried this out with my climate safe layers and everything is working really well. I looked for code to add a legend that works with the GroupLayer here. It has been really helpful as well.