I am working on a web app where I have to show my management different scenarios as per their requirement.
Currently, what I achieved is I am able to create the time bound web scenes, but now I want to save all these scenarios like a Scenario A, Scenario B etc which will portray different timings of the day. Also, I want to see any specific land or property has any impact of solar movement. But in my code, I am able to create a scenario as below, but when I try to create a second scenario it is giving me error.
Any suggestions??
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.21/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.21/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#selection {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
display: flex;
justify-content: center;
}
.esri-button {
max-width: 300px;
margin-left: 5px;
}
.esri-button--secondary {
background-color: white;
}
</style>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/widgets/ShadowCast"
], function (WebScene, SceneView, ShadowCast) {
const view = new SceneView({
container: "viewDiv",
map: new WebScene({
portalItem: {
id: "f2220db76c6448b4be8083d19ef4cf8d"
}
}),
qualityProfile: "high",
environment: {
lighting: {
directShadowsEnabled: false
}
}
});
const widget = new ShadowCast({ view });
view.ui.add(widget, "top-right");
widget.viewModel.date = new Date("May 1, 2021");
let scenarioA = null;
let scenarioB = null;
view.when(() => {
view.map.allLayers.forEach((layer) => {
if (layer.title === "Development Scenario A") {
scenarioA = layer;
}
if (layer.title === "Development Scenario B") {
scenarioB = layer;
}
});
});
buttonA.addEventListener("click", (event) => {
toggleScenarios("A");
});
buttonB.addEventListener("click", (event) => {
toggleScenarios("B");
});
function toggleScenarios(active) {
scenarioA.visible = active === "B" ? false : true;
scenarioB.visible = active === "B" ? true : false;
if (active === "B") {
buttonA.classList.add("esri-button--secondary");
buttonB.classList.remove("esri-button--secondary");
}
if (active === "A") {
buttonA.classList.remove("esri-button--secondary");
buttonB.classList.add("esri-button--secondary");
}
}
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="selection">
<button id="scenarioA" class="esri-button">Scenario A</button>
<button id="scenarioB" class="esri-button esri-button--secondary">
Scenario B
</button>
</div>
</div>
</body>
</html>