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>
Your buttons are named scenarioA and scenarioB, but you're referring to them as buttonA and buttonB in your code (I changed lines 111 and 112)
<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="buttonA" class="esri-button">Scenario A</button>
<button id="buttonB" class="esri-button esri-button--secondary">
Scenario B
</button>
</div>
</div>
</body>
</html>