Multiple LayerLists In Web App

[RichardRhone]

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

[RichardRhone]

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?

[RobertScheitlin__GISP]

Richard,

   You have to query the list container node.

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

[RichardRhone]

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

[RobertScheitlin__GISP]

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)
        });
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RichardRhone]

Thanks. That worked 

[TamiaRudnicky]

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.