Web scene - slide tour | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample demonstrates how to create an animated tour of the slides in a WebScene by using the applyTo() method. applyTo() returns a promise that resolves after the slide has been applied to the view. By chaining the applyTo() method of the slides, we can play through all the slides without user input.

The chaining is done with a recursive function:

      // Recursive function to animate between slides
      function goToSlide(i) {
        if (i < slides.length) {
          const slide = slides.getItemAt(i);
          button.style.display = "none";

          // Update info for current slide
          titleDiv.textContent = slide.title.text || "Untitled slide";
          descDiv.textContent = slide.description.text || "";

          slide.applyTo(viewElement.view, { duration: 3000 }).then(() => {
            startProgressCountdown();
            window.setTimeout(() => {
              goToSlide(i + 1);
            }, 8000);
          });
        } else {
          // Tour finished
          button.style.display = "block";
          progressBar.value = 100;
        }
      }

Load a basic web scene

Save a web scene

Web scene - slides

<!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>Web scene - slide tour | 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%;
      }

      #info-div {
        width: 35rem;
        padding: 1rem;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
      }

      #progress {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }

      #title {
        font-weight: bold;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        text-align: left;
        width: 100%;
      }

      #description {
        text-align: left;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <arcgis-scene item-id="a594109d36464cd2a92a01325b4f6f42">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <div slot="bottom-left" id="info-div">
        <calcite-progress
          id="progress"
          label="Timeout before next slide"
          value="100"
          reversed></calcite-progress>
        <div id="content">
          <div id="title"></div>
          <div id="description"></div>
        </div>
        <calcite-button id="start-btn">Start tour</calcite-button>
      </div>
    </arcgis-scene>

    <script type="module">
      // Get the reference to the webscene
      const viewElement = document.querySelector("arcgis-scene");
      // Wait for the view to load
      await viewElement.viewOnReady();

      // Get the slides from the WebScene
      const slides = viewElement.map.presentation.slides;

      // DOM elements for info
      const titleDiv = document.getElementById("title");
      const descDiv = document.getElementById("description");

      // Initialize first slide info
      const firstSlide = slides.getItemAt(0);
      titleDiv.textContent = firstSlide.title.text;
      descDiv.textContent = firstSlide.description.text;

      const button = document.getElementById("start-btn");
      button.addEventListener("click", () => {
        // Start the tour on button click
        goToSlide(1);
      });


      // Recursive function to animate between slides
      function goToSlide(i) {
        if (i < slides.length) {
          const slide = slides.getItemAt(i);
          button.style.display = "none";

          // Update info for current slide
          titleDiv.textContent = slide.title.text || "Untitled slide";
          descDiv.textContent = slide.description.text || "";

          slide.applyTo(viewElement.view, { duration: 3000 }).then(() => {
            startProgressCountdown();
            window.setTimeout(() => {
              goToSlide(i + 1);
            }, 8000);
          });
        } else {
          // Tour finished
          button.style.display = "block";
          progressBar.value = 100;
        }
      }


      // Progress bar logic
      let progressTimer;
      const progressBar = document.getElementById("progress");
      const timeoutDuration = 8000; // 8 seconds
      const updateInterval = 10; // 10ms

      function startProgressCountdown() {
        clearInterval(progressTimer);

        let elapsed = 0;
        progressTimer = setInterval(() => {
          elapsed += updateInterval;
          const percent = 100 - (elapsed / timeoutDuration) * 100;
          progressBar.value = percent;

          if (percent <= 0) {
            clearInterval(progressTimer);
            progressBar.value = 100;
          }
        }, updateInterval);
      }
    </script>
  </body>
</html>