web app builder layer list - make it like AGS JS TOC

Idea created by kmsagis Champion on Oct 29, 2018
    New
    Score10
    • kmsagis

    In this example each layer is a service.  SAGIS Property Map Viewer 

     

    It would be good to have inline legend symbols in the layer list.  And not to list duplicate layer names. Like if a service has only one layer.

     

    I used CSS to hide its duplicated sublayer, move the legend symbol up to be in-line for layers with only one symbol. For layers with multiple symbols like Soils, I left those closed. I expanded the ones I wanted with one symbol by programmatically clicking them open (toggling the layer's > v expander). 

     

    It makes it more like the old AGS JS TOC widget like on www.sagis.org/home/map 

     

    I also would like to see where if you click a layer it turns on, and turns on its parent(s). Also, partial state checkbox if only some of the layers in a group are on. Also, if you turn a layer on, it should expand its symbology like AGS JS TOC does. (at least, make it an option true/false for programmers to set).  Add sublayer transparency slider. Last, integrate my metadata boxes to the "..." option button.

     

    I just mocked this up quick in CSS.  More as a working demo than to use in production. For example, the Add Data widget wreaks havoc on the styling because I hid some elements and nodes. The programmatic click thing though, was good to keep in my back pocket.  I will attach the widget code and CSS here later if people want to see it.

     

    So, if the layer list integrated the Legend more completely,  many viewers would not need a separate Legend widget. It would be preferred by users.  I have observed with quite a large user base that the WAB layer list design (groups, expander control, sublayers not turning on if the parent is off, no partial checkboxes) is confusing for users.   These suggestions would be helpful for users. Thank you for consideration!