Slide

AMD: require(["esri/webscene/Slide"], (Slide) => { /* code goes here */ });
ESM: import Slide from "@arcgis/core/webscene/Slide.js";
Class: esri/webscene/Slide
Inheritance: Slide Accessor
Since: ArcGIS Maps SDK 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.at(0);

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

Constructors

Slide

Constructor
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
Basemap

The basemap of the scene.

Slide
String

The name of the class.

Accessor
Accessor

The description of the slide.

Slide
Accessor

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

Slide
Accessor

Ground properties for this slide.

Slide
Boolean

The visibility of a slide in a presentation.

Slide
String

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

Slide
Accessor

A data URI encoded thumbnail.

Slide
Accessor

The title of the slide.

Slide
Viewpoint

The viewpoint of the slide.

Slide
Collection<Accessor>

The visible layers of the scene.

Slide

Property Details

basemap

Property
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

Inherited
Property
declaredClass Stringreadonly
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.7 Accessor since 4.0, declaredClass added at 4.7.

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

description

Property
description Accessorautocast

The description of the slide.

Property
text String
optional
Autocasts from String|Object

The description.

environment

Property
environment Accessorautocast

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

Property
optional

Settings for defining the lighting of the scene.

ground

Property
ground Accessorautocast

Ground properties for this slide.

Property
opacity Number
optional

Ground opacity

hidden

Property
hidden Boolean
Since: ArcGIS Maps SDK for JavaScript 4.28 Slide since 4.0, hidden added at 4.28.

The visibility of a slide in a presentation. A hidden slide should not show up when an application goes into presentation mode.

Default Value:false

id

Property
id String

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

thumbnail

Property
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.

title

Property
title Accessorautocast

The title of the slide.

Property
text String
optional
Autocasts from String|Object

The title.

viewpoint

Property
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

Property
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.at(1).id }
  { id: scene.ground.layers.at(0).id }
];

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

Method Overview

Show inherited methods Hide inherited methods
Name Return Type Summary Class

Adds one or more handles which are to be tied to the lifecycle of the object.

Accessor
Promise<Slide>

Applies a slide's settings to a SceneView.

Slide
Slide

Creates a deep clone of this object.

Slide
Promise<Slide>

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

Slide
Boolean

Returns true if a named group of handles exist.

Accessor

Removes a group of handles owned by the object.

Accessor
Promise<Slide>

Updates a slide from a WebScene's slides.

Slide

Method Details

addHandles

Inherited
Method
addHandles(handleOrHandles, groupKey)
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, addHandles added at 4.25.

Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();
Parameters
handleOrHandles WatchHandle|WatchHandle[]

Handles marked for removal once the object is destroyed.

groupKey *
optional

Key identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.

applyTo

Method
applyTo(view, optionsWithDefaults){Promise<Slide>}

Applies a slide's settings to a SceneView.

Parameters
view SceneView

The SceneView the slide should be applied to.

optionsWithDefaults Object
optional

Animation options. See properties below for object specifications.

options.animate Boolean
optional
Default Value: true

Indicates whether to animate the slide transition.

options.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.

options.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.

options.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.

options.easing String|EasingFunction
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.

options.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

Method
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

Method
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);
  });

hasHandles

Inherited
Method
hasHandles(groupKey){Boolean}
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, hasHandles added at 4.25.

Returns true if a named group of handles exist.

Parameter
groupKey *
optional

A group key.

Returns
Type Description
Boolean Returns true if a named group of handles exist.
Example
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

removeHandles

Inherited
Method
removeHandles(groupKey)
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, removeHandles added at 4.25.

Removes a group of handles owned by the object.

Parameter
groupKey *
optional

A group key or an array or collection of group keys to remove.

Example
obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

updateFrom

Method
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.