Layer List Widget with Legend in 4.x - Getting Symbology Under Show and Hide Layer?

[ipeebles]

Working with the ArcGIS API for JavaScript 4.x.  When working with the layer list, I am wanting to get the symbology to display under the hide and show layers.  Is there any reason why the design is to toggle back and forth, rather than having the hide, show and symbology appear in the same view like the Web App Builder for Developer Edition supports?  Please see screenshots.

Screenshot 1 - WAB Developer Edition Layer List with Legend appearing below check boxes (The way I want it to display)

Screenshot 2 - Layer List have to toggle to see legend (Symbology Display Here is where I want the symbology to be placed without having to toggle.

Screenshot 3 - Legend from clicking on the three lines on the layer list.

Can this be done and if so, what am I overlooking?  If this cannot be done, has this ever been considered?

Would be nice to turn off and on layers while viewing the symbology at the same time.  No need to add extra clicks.

[KristianEkenes · Accepted solution]

Yes. There is a way to have panel content initialize in an open state. You need to set the open property on the ListItemPanel to true. See this example here: https://codepen.io/kekenes/pen/VwMPaLL?editors=1000

Specifically on lines 104-107...

[ipeebles]

Thank you Kristian.  You have me on the right track.   I have been able to get the legend working as part of the layer list.  Still learning the 4.x API.

[ipeebles]

This only works in the 4.23 API? Does not work in 4.22?

[KristianEkenes · Accepted solution]

Ah. Sorry about that. Yes, opening the panel on load is supported in 4.22. That example is showing the legend for each sublayer in a MapImageLayer. That was not fixed until 4.23, which technically isn't supported yet. You can still display legend for layers at 4.22, but not for sublayers. Here's how it would work at 4.22: https://codepen.io/kekenes/pen/ExbyPBb?editors=1000

[nadja_swiss_parks]

Hi @KristianEkenes 

I'm unsure if it's better to open a new question, but it is related to above thread... I built my legend in a similar way: As soon as the layer visibility is turned on, the legend becomes visible. But I would like to allow the user to see the legend content even if the layer is not visible (on mouse click). I managed to show the legend icon if the layer is not visible, but if I open the legend I see "No legend".  How can I display the legend without displaying the layer?

[KristianEkenes · Accepted solution]

Hi @nadja_swiss_parks ,

You can set the Legend.respectLayerVisibility property to false and the legend content will always display regardless of whether the layer is visible in the view or not. Here's the doc: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html#respectLayerV...

Hopefully that's what you're looking for.