Multiple Layer Lists with different layers using ArcGIS JS API 4.15

202
1
07-22-2020 08:00 PM
MasonBindl
New Contributor II

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Reply
RobertScheitlin__GISP
MVP Esteemed Contributor

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