Slide

AMD: require(["esri/webscene/Slide"], (Slide) => { /* code goes here */ });
ESM: import Slide from "@arcgis/core/webscene/Slide";
Class: esri/webscene/Slide
Inheritance: Slide Accessor
Since: ArcGIS API for JavaScript 4.0

A slide stores a snapshot of several pre-set properties of the WebScene and SceneView, such as the basemap, viewpoint and visible layers. The visible layers may contain references (by Layer) to both operational layers from the scene as well as elevation layers from the ground, which affect the surface elevation.

Slides contain additional metadata such as a title, description and thumbnail which may be used to present the slide to the user in a user interface. Slides can be created, updated and applied to a SceneView. Additionally, slides can be stored as part of the WebScene.presentation.

See also:
Example:
// Create a slide from a view and apply it at a later time
Slide.createFrom(view).then(function(slide) {
  // Add slide to the scene presentation
  scene.presentation.slides.add(slide);
});

// At a later time
let firstSlide = scene.presentation.slides.getItemAt(0);

firstSlide.applyTo(view).then(function() {
  // Slide has been successfully applied to the view
});

Constructors

new Slide(properties)

Create a new slide instance. Usually Slide.createFrom is used instead to create a new slide which stores a snapshot of the view.

Parameter:
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
Show inherited properties Hide inherited properties
Name Type Summary Class
Basemapmore details

The basemap of the scene.

more detailsSlide
Stringmore details

The name of the class.

more detailsAccessor
Accessormore details

The description of the slide.

more detailsSlide
Accessormore details

Represents settings that affect the environment in which the WebScene is displayed (such as lighting).

more detailsSlide
Accessormore details

Ground properties for this slide.

more detailsSlide
Stringmore details

The unique id of a slide within the slides property of a Presentation.

more detailsSlide
Accessormore details

A data URI encoded thumbnail.

more detailsSlide
Accessormore details

The title of the slide.

more detailsSlide
Viewpointmore details

The viewpoint of the slide.

more detailsSlide
Collection<Accessor>more details

The visible layers of the scene.

more detailsSlide

Property Details

basemap Basemapautocast
Autocasts from String|Object

The basemap of the scene. Only the base and reference layers of the basemap are stored in a slide.

This value can be an instance of Basemap or one of the strings listed in the table below.

Value Description
streets basemap-streets
satellite basemap-satellite
hybrid basemap-hybrid
topo basemap-topo
gray basemap-gray
dark-gray basemap-dark-gray
oceans basemap-oceans
national-geographic basemap-national-geographic
terrain basemap-terrain
osm basemap-osm
declaredClass Stringreadonly inherited
Since: ArcGIS API for JavaScript 4.7

The name of the class. The declared class name is formatted as esri.folder.className.

description Accessorautocast

The description of the slide.

Property:
text String
optional
Autocasts from String|Object

The description.

environment Accessorautocast

Represents settings that affect the environment in which the WebScene is displayed (such as lighting).

Property:
lighting Lighting
optional

Settings for defining the lighting of the scene.

Ground properties for this slide.

Property:
opacity Number
optional

Ground opacity

id String

The unique id of a slide within the slides property of a Presentation.

thumbnail Accessorautocast

A data URI encoded thumbnail.

Property:
url String
optional
Autocasts from String|Object

The URI pointing to the thumbnail image representing the slide.

The title of the slide.

Property:
text String
optional
Autocasts from String|Object

The title.

viewpoint Viewpointautocast

The viewpoint of the slide. This acts like a bookmark, saving a predefined location or point of view from which to view the scene.

visibleLayers Collection<Accessor>autocast

The visible layers of the scene. This is a collection of objects that stores references (by ID) to the scene layers and ground layers that are set as visible when a slide is applied to a SceneView.

When assigning visible layers, the following types of values will be automatically casted:

The specification for each object in the collection is outlined in the table below.

Properties:
id String
Autocasts from Object[]

The ID of a layer in the WebScene or Ground that is made visible in the SceneView when the slide is applied to the view.

sublayerIds Number[]
Autocasts from Object[]

The service ids of the visible sublayers on the layer specified by the layer id. If this is not present, the visibilities of the sublayers are not changed when applying the slide.

Example:
// Update the visible layers to the second layer in the scene, and the
// first elevation layer in the ground.
slide.visibleLayers = [
  { id: scene.layers.getItemAt(1).id }
  { id: scene.ground.layers.getItemAt(0).id }
];

// Equivalent using convenience autocasting
slide.visibleLayers = [scene.layers.getItemAt(0), scene.ground.layers.getItemAt(0)];

Method Overview

Name Return Type Summary Class
Promise<Slide>more details

Applies a slide's settings to a SceneView.

more detailsSlide
Slidemore details

Creates a deep clone of this object.

more detailsSlide
Promise<Slide>more details

Creates a slide from a SceneView, which may be added to the slides in the WebScene's presentation.

more detailsSlide
Promise<Slide>more details

Updates a slide from a WebScene's slides.

more detailsSlide

Method Details

applyTo(view, options){Promise<Slide>}

Applies a slide's settings to a SceneView.

Parameters:
Specification:
view SceneView

The SceneView the slide should be applied to.

options Object
optional

Animation options. See properties below for object specifications.

Specification:
animate Boolean
optional
Default Value: true

Indicates whether to animate the slide transition.

speedFactor Number
optional
Default Value: 1

Increases or decreases the animation speed by the specified factor. A speedFactor of 2 will make the animation twice as fast, while a speedFactor of 0.5 will make the animation half as fast. Setting the speed factor will automatically adapt the default maxDuration accordingly.

duration Number
optional

Set the exact duration (in milliseconds) of the animation. Note that by default, animation duration is calculated based on the time required to reach the target at a constant speed. Setting duration overrides the speedFactor option. Note that the resulting duration is still limited to the maxDuration.

maxDuration Number
optional
Default Value: 8000

The maximum allowed duration (in milliseconds) of the animation. The default maxDuration value takes the specified speedFactor into account.

optional

The easing function to use for the animation. This may either be a preset (named) function, or a user specified function. Supported named presets are: linear, in-cubic, out-cubic, in-out-cubic, in-expo, out-expo, in-out-expo
By default, animations that are less than 1000 ms use an out easing function; longer animations use an in-out function.

signal AbortSignal
optional

Signal object that can be used to abort the asynchronous task. Aborting will cause the slide animation to stop. The returned promise will be rejected with an Error named AbortError when an abort is signaled. See also AbortController for more information on how to construct a controller that can be used to deliver abort signals.

Returns:
Type Description
Promise<Slide> When resolved, returns the updated slide.
Examples:
// Applies the slide's settings to the view, but does
// not use animation when updating the viewpoint
slide.applyTo(view, {
  animate: false
});
// Applies the slide's settings to the view, animates with a maximum
// duration of 2 seconds.
slide.applyTo(view, {
  maxDuration: 2000
});
slide.applyTo(view, {
  maxDuration: 2000
}).then(function(){
 //do something after applying the slide's settings to the view
});
clone(){Slide}

Creates a deep clone of this object. Note that the basemap instance is cloned, but the layers within the basemap are copied.

Returns:
Type Description
Slide A new Slide instance.
createFrom(view, options){Promise<Slide>}static

Creates a slide from a SceneView, which may be added to the slides in the WebScene's presentation. Updating the slide is asynchronous and a snapshot of the view is only complete once the returned promise has resolved.

Parameters:
Specification:
view SceneView

The SceneView from which the slide should be created.

options Object
optional

Creation options. See properties below for object specifications.

Parameters:
Specification:
screenshot Object
optional

Screenshot options to use. See properties below for object specifications.

Specification:
format String
optional
Default Value: png

The image format.

quality Number
optional
Default Value: 80

The image quality (due to compression).

width Number
optional
Default Value: 120

The image width.

height Number
optional
Default Value: 75

The image height.

Returns:
Type Description
Promise<Slide> When resolved, returns the created slide.
Examples:
// Creates a slide from the view and
// adds it to the webscene
Slide.createFrom(view).then(function(slide){
  webscene.presentation.slides.add(slide);
});
// Create multiple slides from multiple viewpoints.
view.goTo({ heading: 0 }, { animate: false })
  .then(function() {
    // Create first slide at heading 0 (looking north)
    return Slide.createFrom(view);
  })
  .then(function(slide){
    // Slide has been captured, add to presentation
    webscene.presentation.slides.add(slide);

    // Change viewpoint to look east
    return view.goTo({ heading: 90 }, { animate: false });
  })
  .then(function() {
    // Capture second slide
    return Slide.createFrom(view);
  })
  .then(function(slide) {
    // Add second slide to presentation
    webscene.presentation.slides.add(slide);
  });
updateFrom(view, options){Promise<Slide>}

Updates a slide from a WebScene's slides. Updating the slide is asynchronous and a snapshot of the view is only complete once the returned promise has resolved.

Parameters:
Specification:
view SceneView

The SceneView from which the slide should update.

options Object
optional

Update options. See properties below for object specifications.

Parameters:
Specification:
screenshot Object

Screenshot options to use. See properties below for object specifications.

Specification:
format String
optional
Default Value: png

The image format.

quality Number
optional
Default Value: 80

The image quality (due to compression).

width Number
optional
Default Value: 120

The image width.

height Number
optional
Default Value: 75

The image height.

Returns:
Type Description
Promise<Slide> When resolved, returns the updated slide.

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