Update the camera in a 3D view | Sample | ArcGIS Maps SDK for JavaScript

Skip to content
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Update the camera in a 3D view | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        margin: 0;
        height: 100%;
      }

      #buttonsDiv {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 12px;
        background-color: rgba(200, 200, 200, 0.5);
        border: 1px solid black;
      }

      #indicatorSpan {
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        background-color: rgba(100, 100, 100, 0.8);
        border: 2px solid #ccc;
      }
    </style>
  </head>

  <body>
    <arcgis-scene
      basemap="hybrid"
      ground="world-elevation"
      camera-position="7.654, 45.919, 5183"
      camera-tilt="80">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"> </arcgis-compass>
    </arcgis-scene>
    <div id="buttonsDiv">
      <button id="rotateAntiClockwiseSpan" title="Rotate 90°">↻</button>
      <button id="indicatorSpan"></button>
      <button id="rotateClockwiseSpan" title="Rotate 90°">↺</button>
    </div>

    <script type="module">
      const [reactiveUtils] = await $arcgis.import(["@arcgis/core/core/reactiveUtils.js"]);

      /*****************************************************************
       * Get a reference to the Scene component
       *****************************************************************/
      const viewElement = document.querySelector("arcgis-scene");
      await viewElement.viewOnReady();

      // create the event's callback functions
      const rotateView = async (direction) => {
        let heading = viewElement.camera.heading;

        // Set the heading of the view to the closest multiple of 90 degrees,
        // depending on the direction of rotation
        if (direction > 0) {
          heading = Math.floor((heading + 1e-3) / 90) * 90 + 90;
        } else {
          heading = Math.ceil((heading - 1e-3) / 90) * 90 - 90;
        }

        try {
          await viewElement.goTo({
            heading,
          });
        } catch (error) {
          if (error.name != "AbortError") {
            console.error(error);
          }
        }
      };

      const tiltView = async () => {
        // Get the camera tilt and add a small number for numerical inaccuracies
        let tilt = viewElement.camera.tilt + 1e-3;

        // Switch between 3 levels of tilt
        if (tilt >= 80) {
          tilt = 0;
        } else if (tilt >= 40) {
          tilt = 80;
        } else {
          tilt = 40;
        }

        try {
          await viewElement.goTo({
            tilt,
          });
        } catch (error) {
          if (error.name != "AbortError") {
            console.error(error);
          }
        }
      };

      const updateIndicator = (camera) => {
        let tilt = camera.tilt;
        let heading = camera.heading;
        // Update the indicator to reflect the current tilt/heading using
        // css transforms.

        const transform = `rotateX(${0.8 * tilt}deg) rotateY(0) rotateZ(${-heading}deg)`;
        indicatorSpan.style["transform"] = transform;
        indicatorSpan.style["-webkit-transform"] = transform; // Solution for Safari
      };

      // Register events to control
      const rotateAntiClockwiseSpan = document.getElementById("rotateAntiClockwiseSpan");
      const rotateClockwiseSpan = document.getElementById("rotateClockwiseSpan");
      const indicatorSpan = document.getElementById("indicatorSpan");
      rotateClockwiseSpan.addEventListener("click", () => {
        rotateView(-1);
      });
      rotateAntiClockwiseSpan.addEventListener("click", () => {
        rotateView(1);
      });
      indicatorSpan.addEventListener("click", tiltView);

      // Watch the change on viewElement.camera
      reactiveUtils.watch(
        () => viewElement.camera,
        (camera) => {
          updateIndicator(camera);
        },
      );
      updateIndicator(viewElement.camera);
    </script>
  </body>
</html>