Multiple Layer Lists with different layers using ArcGIS JS API 4.15

MasonBindl — Sun, 12 Dec 2021 01:10:07 GMT

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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Tahoe Imagery Swipe</title>

    <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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Multiple Layer Lists with different layers using ArcGIS JS API 4.15

RobertScheitlin__GISP — Sun, 12 Dec 2021 01:10:10 GMT

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']);‍

topic Multiple Layer Lists with different layers using ArcGIS JS API 4.15 in ArcGIS JavaScript Maps SDK Questions

Multiple Layer Lists with different layers using ArcGIS JS API 4.15

Re: Multiple Layer Lists with different layers using ArcGIS JS API 4.15