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 contains a few pre-made slides, and toggling any of them will navigate the viewpoint to the corresponding natural landmark.
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.
// 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.
slideElement.addEventListener("click", () => {
slide.applyTo(view);
});