Combining legend and layer list using ArcGIS API for JavaScript?

Question

I'm building a web app using ESRI's ArcGIS API for Javascript 4.8. I have a legend and a layer list widget on the page. The legend displays the symbology used but lacks ability to toggle display of the feature. The layer list allows toggling display of the feature but lacks the symbology (e.g., what does that red circle represent?)

Is there a widget that combines the visibility toggle and symbology so I have one widget on the page?

Or do I need to create custom widget for this?

Any other options before I start down the path of building a custom widget?

Answer 1

You have a sample here

// Add a legend instance to the panel of a
// ListItem in a LayerList instance
const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function (event) {
    const item = event.item;
    item.panel = {
      content: "legend",
      open: true
    };
  }
});
view.ui.add(layerList, "top-right");

Answer 2

How about include Legend and Visibility Slider both in to the Layer List.

Code:

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function (event) {
    const item = event.item;
    item.panel = {
      content: "legend",
      open: true
    };

 const slider = new Slider({
      min: 0,
      max: 1,
      precision: 2,
      values: [ 1 ],
      visibleElements: {
        labels: true,
        rangeLabels: true
      }
    });

    item.panel = {
      content: slider,
      className: "esri-icon-sliders-horizontal",
      title: "Change layer opacity"
    };
  }
});

Is it possible? if yes, Please share the code.