Combine legend and layer visibility into one widget

[acarmody]

Hi there,

Request/suggestion/plea to allowed combined functionality of these 2 widgets across all ESRI products (WAB, ExB, Dashboards etc). Please see an example of suggested legend/layer functionality here, https://maps.cityofsydney.nsw.gov.au/accessibility-map/ It's not polished but gives you the basic idea...

Combining functionality would increase screen real estate and improve UX.

Using 2 widgets, separately, we've found is confusing for the user.

If anyone has a workaround I would love/appreciate/be ever grateful if you could share.

Many thanks,

Alannah

[JamieLambert]

Thanks for the example Alannah C‌. I like it, though it would be good to see in the legend/layers list what is turned off. Otherwise its a great idea to simplify. Don't forget the mobile apps!

[acarmody]

My current workaround is  Lee Penny's Interactive Legend Idea.
Hopefully this functionality will be available in Experience Builder too (as outlined by THAYNES.BC here Filter widget functionality in Experience Builder to match WAB).

[KevinMacLeod3]

Good idea and I agree. I'd like to see the legend integrated into the JS API 4.x in the API LayerList widget officially. 

The WebApp Builder Layer List does have a good legend built in. It can be the example to follow. However, the user has to know to click the layers to see it. But, not a problem. I use jQuery to 'click' and expand some of the items with one or two legend symbols. Works great. (though watch the node IDs, they change when you readd services to the webmap) I keep the ones with a dozen or more minimized. With a tooltip advising to expand them to see the legend. So the way it works in WebApp Builder is fairly good, and I'd like to see it integrated into the 4.x API like how it is currently in WebApp Builder.   Suggestion, when adding to 4.x JS API:   It should be as easy to configure as Legend: "true" and then per each subLayer Expand: "true" for each, to determine if they are expanded. With an optional "ExpandedAll: "true" property to expand them all. 

[wayfaringrob]

Huge kudos to this. The "eye" icon isn't the most intuitive and I've felt in some cases it's redundant to have both. I've tried the interactive legend style of instant apps but it seems buggy and only allows the user to uncheck individual symbol classes, not whole layers.