topic Re: Multiple LayerLists In Web App in ArcGIS JavaScript Maps SDK Questions

Multiple LayerLists In Web App

RichardRhone — Thu, 05 Sep 2019 18:39:36 GMT

Is it possible to have more than one layerlist in one web app. I would like to add another layerlist where i can have only some of the layers visible in layerList1 and other layers visible in layerList2

Re: Multiple LayerLists In Web App

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:21:11 GMT

Richard,

Through direct dom manipulation you can:

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

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>

    <script src="https://js.arcgis.com/4.12/"></script>

    <script>
      require([
        "esri/views/SceneView",
        "esri/widgets/LayerList",
        "esri/WebScene",
        "dojo/query",
        "esri/core/watchUtils",
        "dojo/dom-style"
      ], function(SceneView, LayerList, WebScene, query, watchUtils, domStyle) {
        var scene = new WebScene({
          portalItem: {
            // autocasts as new PortalItem()
            id: "adfad6ee6c6043238ea64e121bb6429a"
          }
        });

        var view = new SceneView({
          container: "viewDiv",
          map: scene
        });

        view.when(function() {
          var layerList = new LayerList({
            view: view,
            id: "layerlist1"
          });

          // Add widget to the top right corner of the view
          view.ui.add(layerList, "top-right");
          
          //workaround for making sure layerlist is ready
          watchUtils.when(layerList, 'operationalItems.length', function(){
             var lis = query('li[aria-labelledby $= "__title"]', layerList.domNode);
             lis.map(function(li){
               if(li.innerText === "San Francisco"){
                 domStyle.set(li, "display", "none");
               }
               if(li.innerText === "Growth Potential"){
                 domStyle.set(li, "display", "none");
               }
             });
          });
          
          var layerList2 = new LayerList({
            view: view
          });

          // Add widget to the top right corner of the view
          view.ui.add(layerList2, "bottom-right");
          
          //workaround for making sure layerlist is ready
          watchUtils.when(layerList2, 'operationalItems.length', function(){
             var lis = query('li[aria-labelledby $= "__title"]', layerList2.domNode);
             lis.map(function(li){
               if(li.innerText === "Transit lines in service"){
                 domStyle.set(li, "display", "none");
               }
               if(li.innerText === "Transit lines planned"){
                 domStyle.set(li, "display", "none");
               }
             });
          });
        });
      });
    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Multiple LayerLists In Web App

JohanArtica — Tue, 10 Sep 2019 15:59:27 GMT

Robert Scheitlin, GISP,
What would be the way if the layerlist were inside an expand widget?

Re: Multiple LayerLists In Web App

RobertScheitlin__GISP — Tue, 10 Sep 2019 16:21:15 GMT

No difference. Same code would apply.

Re: Multiple LayerLists In Web App

JohanArtica — Fri, 10 Dec 2021 23:21:15 GMT

I tried adding an expand widget, but I don't get it to work, what am I doing wrong?

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

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>

    <script src="https://js.arcgis.com/4.11/"></script>

    <script>
      require([
        "esri/views/SceneView",
        "esri/widgets/LayerList",
        "esri/WebScene",
        "esri/widgets/Expand",
        "dojo/query",
        "esri/core/watchUtils",
        "dojo/dom-style"
      ], function(SceneView, LayerList, WebScene, Expand, query, watchUtils, domStyle) {
        var scene = new WebScene({
          portalItem: {
            // autocasts as new PortalItem()
            id: "adfad6ee6c6043238ea64e121bb6429a"
          }
        });

        var view = new SceneView({
          container: "viewDiv",
          map: scene
        });

        view.when(function() {
          
      var layerList = new LayerList({
        container: document.createElement("div"),
        view: view,
        id: "layerlist1"
      });
      
      var layerListExpand = new Expand({
        expandIconClass: "esri-icon-layers", 
        expandTooltip: "Operational Layers",
        view: view,
        expanded: true,
        content: layerList
      });
      
      view.ui.add(layerListExpand, "top-right");
          
         /* var layerList = new LayerList({
            view: view,
            id: "layerlist1"
          });

          // Add widget to the top right corner of the view
          view.ui.add(layerList, "top-right"); */
          
          //workaround for making sure layerlist is ready
          watchUtils.when(layerList, 'operationalItems.length', function(){
             var lis = query('li[aria-labelledby $= "__title"]', layerList.domNode);
             lis.map(function(li){
               if(li.innerText === "San Francisco"){
                 domStyle.set(li, "display", "none");
               }
               if(li.innerText === "Growth Potential"){
                 domStyle.set(li, "display", "none");
               }
             });
          });
          
          var layerList2 = new LayerList({
            view: view
          });

          // Add widget to the top right corner of the view
          view.ui.add(layerList2, "bottom-right");
          
          //workaround for making sure layerlist is ready
          watchUtils.when(layerList2, 'operationalItems.length', function(){
             var lis = query('li[aria-labelledby $= "__title"]', layerList2.domNode);
             lis.map(function(li){
               if(li.innerText === "Transit lines in service"){
                 domStyle.set(li, "display", "none");
               }
               if(li.innerText === "Transit lines planned"){
                 domStyle.set(li, "display", "none");
               }
             });
          });
        });
      });
    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Multiple LayerLists In Web App

RobertScheitlin__GISP — Tue, 10 Sep 2019 18:14:37 GMT

Johan,

OK, I see the issue is the dom node the query needs to work with is now the expand widgets dom node:

var lis = query('li[aria-labelledby $= "__title"]', layerListExpand.domNode);‍

Instead of the layerList.domNode

Re: Multiple LayerLists In Web App

RichardRhone — Wed, 11 Sep 2019 13:06:32 GMT

Thanks Robert.

However, It doesn't work if I add the layerList to a container

var otherLayer = new LayerList({ view: view , container: "oRisk" });

I gather I would have to edit the following?

var lis = query('li[aria-labelledby $= "__title"]', otherRisksLayer.domNode);

not quite sure to what though. Any advise?

Re: Multiple LayerLists In Web App

RobertScheitlin__GISP — Wed, 11 Sep 2019 13:15:57 GMT

Richard,

You have to query the list container node.

var lis = query('li[aria-labelledby $= "__title"]', "oRisk");‍

Re: Multiple LayerLists In Web App

RichardRhone — Wed, 11 Sep 2019 14:16:00 GMT

That doesn't seems to work:

//configure customer layer list for other risks
var otherLayer = new LayerList({ view: view, container: "oRisk", listItemCreatedFunction: function (event) { item = event.item; item.panel = { content: "legend" }; }});
view.ui.add(otherLayer, "manual");
//workaround for making sure layerlist is ready
watchUtils.when(otherLayer, 'operationalItems.length', function(){

console.log("in function");
var lis = query('li[aria-labelledby $= "__title"]', "oRisk");

console.log("LIS ", lis);

lis.map(function(li)
{

console.log("in li ", li);

}

Results:

Only 2 of 3 logs show

Re: Multiple LayerLists In Web App

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:21:17 GMT

Richard,

Seems like a timing issue.

      view.when(function () {
        var otherLayer = new LayerList({
          view: view,
          container: "oRisk",
          listItemCreatedFunction: function (event) {
            item = event.item;
            item.panel = {
              content: "legend"
            };
          }
        });
        view.ui.add(otherLayer, "manual");
        //workaround for making sure layerlist is ready
        watchUtils.when(otherLayer, 'operationalItems.length', function () {
          setTimeout(function () {
            var lis = query('li[aria-labelledby $= "__title"]', 'oRisk');
            console.info(lis);
            lis.map(function (li) {
              if (li.innerText === "San Francisco") {
                domStyle.set(li, "display", "none");
              }
              if (li.innerText === "Growth Potential") {
                domStyle.set(li, "display", "none");
              }
            });
          }, 0)
        });
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Multiple LayerLists In Web App

RichardRhone — Wed, 11 Sep 2019 16:07:29 GMT

Thanks. That worked

Re: Multiple LayerLists In Web App

RichardRhone — Thu, 12 Sep 2019 13:56:58 GMT

I am trying with the expand but not getting the desired result :

watchUtils.when(layerList2, 'operationalItems.length', function ()
{
setTimeout(function ()
{
var lis = query('li[aria-labelledby $= "__title"]', expandLyr.domNode);

console.log("LIS ", lis);

lis.map(function (li)
{
console.log(li.innerText);
});
}, 0)
});

Results :

Notice that only subs have a innerText. How do I get around this as I need to remove these from the layerList

I do not have this issue with the layerList by itself; only with Expand

Re: Multiple LayerLists In Web App

RichardRhone — Thu, 12 Sep 2019 14:58:36 GMT

Issue resolved by putting the code outside view.when()

Re: Multiple LayerLists In Web App

JohanArtica — Fri, 13 Sep 2019 14:16:22 GMT

Robert,

I'm sorry to bother you again with my inconveniences, but when the expanded property is changed to false, in the expand widget, it doesn't work properly, do you know why this happens?

Re: Multiple LayerLists In Web App

RobertScheitlin__GISP — Fri, 13 Sep 2019 14:32:39 GMT

because when the expand is hiding the layerlist then the query can not find the nodes it is searching for. You will have to watch the expand to see if it is expanded before you execute the query code.

Re: Multiple LayerLists In Web App

TamiaRudnicky — Tue, 02 Jun 2020 21:00:00 GMT

Hi,

I am trying to modify the multiple layerList code for use with the latest ArcGIS JavaScript api 4.15 and am not having much luck. I tried removing dojo query and domStyle and substituting vanilla javascript but got lost trying to capture the list and manipulate it.

Has anyone successfully upgrade this code or can anyone help me with this?

Thanks.