Multiple Layer Lists with different layers using ArcGIS JS API 4.15

Question

I'm trying to adapt this example from Tamia Rudnicky and Christian Bischof where they create multiple layer lists with different layers. I think the example above was adapted from this example by Robert Scheitlin, GISP‌. That example succesfully parses the layers into two lists. arcgis-js-api-4.15‌ I'm hoping to get two of the layers to show up in the list on the bottom left and one layer to show up in the layer list on the bottom right. Right now, I can only control the layers in the list on the bottom left using: view.when(function() { watchUtils.when(lList, 'operationalItems.length', function() { var elementsLeftList = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children'); elementsLeftList[2].style.display = "none"; console.log(elementsLeftList); });‍‍‍‍‍‍ });‍‍‍‍‍‍ ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Does anybody know how to control the layers that are visible in each list? Thanks, Mason Here is the full code: <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Tahoe Imagery Swipetitle> <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.16/">script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/TileLayer", "esri/widgets/Fullscreen", "esri/widgets/LayerList", "esri/widgets/Swipe", "esri/widgets/Expand", "dojo/query", "esri/core/watchUtils", "dojo/dom-style" ], function(Map, MapView, TileLayer, Fullscreen, LayerList, Swipe, Expand,query, watchUtils, domStyle) { const map = new Map({ basemap: "satellite" }); const fifteenLayer = new TileLayer({ url: "https://maps.trpa.org/server/rest/services/2015_Imagery/MapServer", maxScale: 3000 }); map.add(fifteenLayer); const fortyLayer = new TileLayer({ url: "https://maps.trpa.org/server/rest/services/1940_Imagery/MapServer", maxScale: 3000 }); map.add(fortyLayer); const sixtynineLayer = new TileLayer({ url: "https://maps.trpa.org/server/rest/services/1969_Imagery/MapServer", maxScale: 3000 }); map.add(sixtynineLayer); const view = new MapView({ container: "viewDiv", map: map, center: [-120.01,38.93], zoom: 15, constraints: { maxZoom: 17, minZoom: 8 } }); var lList = new LayerList({ view: view }); var rList = new LayerList({ view: view }); view.when(function() { watchUtils.when(lList, 'operationalItems.length', function() { var elementsLeftList = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children'); elementsLeftList[2].style.display = "none"; // elementsLeftList[1].style.display = "none"; console.log(elementsLeftList); }); watchUtils.when(rList, 'operationalItems.length', function() { var elementsRightList = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children'); elementsRightList[2].style.display = "none"; console.log(elementsRightList); }); }); view.ui.add(lList, "bottom-left"); view.ui.add(rList, "bottom-right"); var leftlayerListExpand = new Expand({ expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/ expandTooltip: "Expand LayerList", // optional, defaults to "Expand" for English locale view: view, expanded: true, content: lList.domNode }); view.ui.add(leftlayerListExpand, "bottom-left") var rightlayerListExpand = new Expand({ expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/ expandTooltip: "Expand LayerList", // optional, defaults to "Expand" for English locale view: view, expanded: true, content: rList.domNode }); view.ui.add(rightlayerListExpand, "bottom-right") var fullscreen = new Fullscreen({ view: view }); view.ui.add(fullscreen, "top-left"); // create a new Swipe widget const swipe = new Swipe({ leadingLayers: [fortyLayer, fifteenLayer], trailingLayers: [sixtynineLayer], position: 50, // set position of widget to 35% view: view }); // add swipe to view view.ui.add(swipe); }); script> head> <body> <div id="viewDiv">div> body> html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Answer

Mason, Here is what I would use a function like this: function hideLayers(list, layernames){ var lis = query('li[aria-labelledby $= "__title"]', list.domNode); lis.map(function(li){ layernames.map(function(label){ if(li.innerText === label){ domStyle.set(li, "display", "none"); } }); }); }‍‍‍‍‍‍‍‍‍‍ and call it like this: hideLayers(rList, ['1969 Imagery','1940 Imagery']);‍