Enhance simple LayerListWidget and couple with add-data-widget and basemaps-widget

[SebastianKrings]

The LayerList Widget in the JS API is barely functional from scratch.

As the samples in the documentation shows it can list layers or group layers while multiple group layers only can be shown per radio button (so only one at a time). Plus each Layer and sublayer can set visible/invisible.

https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist/
https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-actions/

Further actions like settings (change layer display name, toggle labels on/off, opacity, etc.) need to be implemented by hand.

Also dragging the layers order for z-index visibility is not possible out of the box.

Another use case is an introduction plus tight coupling of the add-data-widget which does not exist as widget in the JS SDK API without custom implementations. The widget does exist on ExpBuilderApp where it allows to add further portal layers or external layer via URL. A combined UI (like tabbing) is desired.

Also an integration of the basemaps-widget is useful.

This is the out out-of-the-box layout of the layer-list-widget:

This is the out-of-the-box layout of the add-data-widget in ExpBuilder:

Adding new layers is simple but it is not possible out of the box to remove them from the local layer list.
Also the add data widget has its own list ob added data, unnecessary duplicate to the layerlist widget.

We worked around that creating custom code which creates much maintenance during every version update of the SDK and still lacks of some functionality (like we do not support group layers yet because of the deep coded layer handles which causes negative side effects in other parts of code and is not yet solved on our side).

So far our custom widget can:

• in the first tab ("active content") we implemented a layer-list-widget
  • list all layers as part of the map
  • make then visible/invisible
  • reorder z-index
  • open layer settings (dependent on the layer type different settings will be provided, like for feature layers the opacity, layername, layer refresh time, renderer selection)
  • a layer can be removed from map with the trash-icon
• on the second tab ("catalog") we implemented an enhanced add-data-widget
  • it is divided into three sub tabs
    • layers
      • shows a all layers from the "catalog" which actually is a set of layers coming from a config-json file
        • the advantage of this predefined list is to hard configure layers of interest instead of flooding the user with all portal items available (e.g. there may be more than one app in the portal + due to multiple staging instances there are multiple portals during development while the json stays the same)
        • these may be WFS or other layers from the portal or external layers from gov or weather as well
      • this could/ should show the portal item search (additionally)
      • layers listed here have a plus-sign which will add them to the active-area (first main tab)
        • the plus sign will change into a minus sign to remove them from the active area
          • this is a duplicate way to remove layers like the trash bin in the active tab
    • basemaps (this is an integration of the basemaps-widget)
      • user can change the basemap
    • add data (external url + geojson)
      • here the user cann add external URLs or GeoJSON files
      • data added here will show in the active section after adding

I created a short screen recoding showing the idea of the widget. Some may notice some minor issues of workflows which they may would solve in a different way. This is why we came here with the idea to get that as part of the SDK since we think this could be a great tool for every developer not only us.