Web scene - slides

Explore in the sandboxView live

This sample demonstrates how to load a WebScene from a Portal for ArcGIS item and work with its slides. Slides store a snapshot of a visualization state of the scene that can be re-applied to the scene at a later time. Slides contain properties for viewpoint, layer visibilities, basemap and environment (as well as a title and thumbnail) so that users of a 3D application can easily navigate the scene and accurately recreate a stored view of that scene. In addition, the sample shows how to create new slides given the current view and store them in the presentation of the WebScene.

This WebScene depicts a fictitious urban development project in the City of Portland and it contains several slides. Each slide toggles the visibility of different layers or contains a different viewpoint of the development.

The WebScene instance has a presentation property that handles the scene's slides. The slides' properties can be used to create DOM elements to represent each viewpoint.

                            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// The view must be ready (or resolved) before you can
// access the properties of the WebScene
view.when(() => {
  // The slides are a collection inside the presentation
  // property of the WebScene
  const slides = scene.presentation.slides;

  // Loop through each slide in the collection
  slides.forEach((slide) => {
    // Create a new <div> element for each slide and place the title of
    // the slide in the element.
    const slideElement = document.createElement("div");
    slideElement.id = slide.id;
    slideElement.classList.add("slide");

    // Create a <div> element to display the slide title text.
    const title = document.createElement("div");
    title.innerText = slide.title.text;
    slideElement.appendChild(title);

    // Create a new <img> element and place it inside the newly created <div>.
    // This will reference the thumbnail from the slide.
    const img = new Image();
    img.src = slide.thumbnail.url;
    img.title = slide.title.text;
    slideElement.appendChild(img);
  });
});

Once a new DOM element is created for each slide, you can set up a click event handler to apply the slide's settings to the view. This is done with the slide's applyTo() method.

   
1
2
3
slideElement.addEventListener("click", () => {
  slide.applyTo(view);
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.