Web scene - slides

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to load a WebScene from an ArcGIS for Portal 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.

// The view must be ready (or resolved) before you can
// access the properties of the WebScene
view.when(function() {

  // The slides are a collection inside the presentation
  // property of the WebScene
  var slides = scene.presentation.slides;

  // Loop through each slide in the collection
  slides.forEach(function(slide) {

    // Create a new <div> element for each slide and place the title of
    // the slide in the element.
    var slideElement = document.createElement("div");
    slideElement.id = slide.id;
    slideElement.classList.add("slide");

    // Create a <div> element to display the slide title text.
    var 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.
    var 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", function() {
  slide.applyTo(view);
});