Hi Tamia Rudnicky,
I'm trying to adapt your code for my use case.
I'm having trouble hiding layers in my second layer list. It seems i'm only able to manipulate the first layer list.
What am I doing wrong?
Here is my 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.14/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.14/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.overlay {
opacity:0;
position:fixed;
top:-999em;
left:-999em;
width:100%;
height:100%;
display:table;
background:rgba(0,0,0,0.8);
-webkit-animation: splash 20s forwards;
animation: splash 20s forwards;
}
.overlay-inner {
display:table-cell;
vertical-align:middle;
text-align:center;
}
.title{
align-content: center;
}
.message {
border-radius: 4px;
background: rgba(102,128,168, 0.6);
display:inline-block;
vertical-align:middle;
width:50%;
text-align:center;
font-family: "Avenir Next W00";
color: #f9f9f9;
padding:10px;
}
.active {
background: #6680a8;
color: #4c4c4c;
}
.overlay-wrap {
position:fixed;
top:0;
left:0;
right:0;
z-index:99;
}
.overlay-wrap .hide {
position:absolute;
top:-999em;
right:20px;
border-radius: 2px;
background: rgba(102,128,168, 0.6);
display:inline-block;
text-align:middle;
font-family: "Avenir Next W00";
opacity:0;
color:#f9f9f9;
padding:2px;
font-size:100%;
z-index:2;
cursor:pointer;
-webkit-animation:15s fadein 2s forwards;
-moz-animation:15s fadein 2s forwards;
-ms-animation:15s fadein 2s forwards;
animation:15s fadein 2s forwards;
}
#hide {
position:absolute;
left:-999em;
top:-999em;
}
.overlay2{
position:absolute;
opacity:1;
-webkit-transition:all 2s;
-moz-transition:all 2s;
-ms-transition:all 2s;
transition:all 2s ;
}
#hide:checked ~ div,#hide:checked ~ div *, #hide:checked + label {
opacity:0;
left:-999em;
right:auto;
top:-999em;
pointer-events:none;
}
@-webkit-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@-moz-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@-ms-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@-webkit-keyframes fadein {
0% {opacity: 0;top:10px;}
20% {opacity:1;top:10px;}
60%{opacity:1;top:10px}
99% {top:10px}
100%{opacity:0;top:-999em}
}
@-moz-keyframes fadein {
0% {opacity: 0;top:10px;}
20% {opacity:1;top:10px;}
60%{opacity:1;top:10px}
99% {top:10px}
100%{opacity:0;top:-999em
}
@-ms-keyframes fadein {
0% {opacity: 0;top:10px;}
20% {opacity:1;top:10px;}
60%{opacity:1;top:10px}
99% {top:10px}
100%{opacity:0;top:-999em
}
@keyframes fadein {
0% {opacity: 0;top:10px;}
20% {opacity:1;top:10px;}
60%{opacity:1;top:10px}
99% {top:10px}
100%{opacity:0;top:-999em}
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList",
"esri/widgets/Swipe",
"esri/widgets/Expand",
"dojo/query",
"esri/core/watchUtils",
"dojo/dom-style"
], function(Map, MapView, TileLayer, MapImageLayer, LayerList, Swipe, Expand,query, watchUtils, domStyle) {
const map = new Map({
basemap: "satellite"
});
const fortyLayer = new MapImageLayer({
url: "https://maps.trpa.org/server/rest/services/1940_Imagery/MapServer",
maxScale: 3000
});
map.add(fortyLayer);
const sixtynineLayer = new MapImageLayer({
url: "https://maps.trpa.org/server/rest/services/1969_Imagery/MapServer",
maxScale: 3000
});
map.add(sixtynineLayer);
const fifteenLayer = new MapImageLayer({
url: "https://maps.trpa.org/server/rest/services/2015_Imagery/MapServer",
maxScale: 3000
});
map.add(fifteenLayer);
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
});
view.when(function() {
watchUtils.when(lList, 'operationalItems.length', function() {
var elementsLeftList = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children');
elementsLeftList[0].style.display = "none";
console.log(elementsLeftList);
});
});
view.ui.add(lList, "bottom-left");
var rList = new LayerList({
view: view
});
view.when(function() {
watchUtils.when(rList, 'operationalItems.length', function() {
var elementsRightList = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children');
elementsRightList[1].style.display = "none";
elementsRightList[2].style.display = "none";
console.log(elementsRightList);
});
});
view.ui.add(rList, "bottom-right");
const swipe = new Swipe({
leadingLayers: [fortyLayer, sixtynineLayer],
trailingLayers: [fifteenLayer],
position: 50,
view: view
});
view.ui.add(swipe);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="overlay-wrap">
<input type="checkbox" name="hide" id="hide">
<label class="hide" for="hide">X</label>
<div class="overlay2">
<div class="overlay">
<div class="overlay-inner">
<div class="message">
<p><h2>Historic Image Swipe</h2></p>
<p>Use this map to <b>SWIPE</b> between the hisotric image layers. Toggle them off to view the most recent imagery underneath.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>