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";
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",
expandTooltip: "Expand LayerList",
view: view,
expanded: true,
content: lList.domNode
});
view.ui.add(leftlayerListExpand, "bottom-left")
var rightlayerListExpand = new Expand({
expandIconClass: "esri-icon-layer-list",
expandTooltip: "Expand LayerList",
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");
const swipe = new Swipe({
leadingLayers: [fortyLayer, fifteenLayer],
trailingLayers: [sixtynineLayer],
position: 50,
view: view
});
view.ui.add(swipe);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>