Scenario based Web Scene in JavaScript API

Aqibjaved — Mon, 15 Nov 2021 19:11:19 GMT

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>

Re: Scenario based Web Scene in JavaScript API

KenBuja — Mon, 15 Nov 2021 19:45:35 GMT

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>

topic Re: Scenario based Web Scene in JavaScript API in ArcGIS JavaScript Maps SDK Questions

Scenario based Web Scene in JavaScript API

Re: Scenario based Web Scene in JavaScript API