Toggle ArcGIS Online WebMap Layers using Javascript?

Question

I am taking an intro course on webmapping and am having some trouble figuring out how to set up a layer list and toggle layers on/off.

I have already preconfigured 2 layers in a WebMap using ArcGIS Online. One is FeatureLayer and the other is a MapImageLayer. My first issue is that my FeatureLayer is not showing up in my legend. The second is that I cannot get the layer list to show up. I would like the ability to turn my layers on/off as needed.

This is what I am trying to accomplish: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-layerlist

I've tried copying the list layers function into my code but am struggling to wrap my head around what I need to to get it to work correctly. Also, not sure why my Legend is only showing 1 of my 2 layers.

 <script>
require([
 "esri/views/MapView",
 "esri/widgets/Legend",
 "esri/WebMap",
 "esri/widgets/Locate",
 "esri/widgets/Search",
 "esri/widgets/ScaleBar",
 "esri/widgets/LayerList",
 "esri/layers/FeatureLayer"
 ],
 function(
 MapView, Legend, WebMap, Locate, Search, ScaleBar, FeatureLayer, LayerList
 ) {
 var webmap = new WebMap({
 portalItem: { // autocasts as new PortalItem()
 id: "2ce3aa115bb044a9af0e73929268975e"
 }
 });
 var view = new MapView({
 container: "viewDiv",
 map: webmap
 });
 var locateBtn = new Locate({
 view: view
 });
 // Add the locate widget to the top left corner of the view
 view.ui.add(locateBtn, {
 position: "top-left"
 });
 view.when(function() {
 // get the first layer in the collection of operational layers in the WebMap
 // when the resources in the MapView have loaded.
 var featureLayer = webmap.layers.getItemAt(0);
 var legend = new Legend({
 view: view,
 layerInfos: [{
 layer: featureLayer,
 title: "Legend"
 }]
 });
 // Add widget to the bottom right corner of the view
 view.ui.add(legend, "bottom-left");
 });
 var searchWidget = new Search({
 view: view
 });
 // Add the search widget to the top right corner of the view
 view.ui.add(searchWidget, {
 position: "top-right"
 });
 var scaleBar = new ScaleBar({
 view: view
});
 // Add widget to the bottom left corner of the view
view.ui.add(scaleBar, {
 position: "bottom-right"
 });
view.when(function() {
 var layerList = new LayerList({
 view: view
 });
 // Add widget to the top right corner of the view
 view.ui.add(layerList, "top-right");
 });
 </script>

Answer 1

Your modules are mapped incorrectly. You have LayerList going to FeatureLayer and FeatureLayer going to LayerList. Reverse them in this line so that they match the order of your module paths.

function( MapView, Legend, WebMap, Locate, Search, ScaleBar, FeatureLayer, LayerList ) {

should be

function( MapView, Legend, WebMap, Locate, Search, ScaleBar, LayerList, FeatureLayer ) {

*Edit: Actually, looking at your code more you don't even need the FeatureLayer module, as you are not instantiating a new one. You also had a minor syntax error, missing one final }); to close out your require function. Here is a working fiddle of your code.

As for why only one layer is showing up in your legend, it's because you explicitly tell it to when you use the layerInfos option. Removing that shows all visible layers in your legend.