Scenario based Web Scene in JavaScript API

Question

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>

score 0 · Answer 1 · answered Oct 23 '21 at 15:08

0

I think you just forgot to define buttonA and buttonB variables. Something like this, before bind them to the click event, should be enough,

const buttonA = document.getElementById("scenarioA");
const buttonB = document.getElementById("scenarioB");

answered Oct 23 '21 at 15:08

cabesuon

4,860
2
15
24

Scenario based Web Scene in JavaScript API

1 Answers1