Slide | API Reference | ArcGIS Maps SDK for JavaScript 4.31

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 Watch for changes topic.

Show inherited properties

Hide inherited properties

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
String	Layout of the slide.	Slide
Accessor	A data URI encoded thumbnail.	Slide
TimeExtent	The time extent of the scene.	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 a value listed in these basemap id tables.

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: lighting SunLighting|VirtualLighting

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.

layout Property layout String Since: ArcGIS Maps SDK for JavaScript 4.31 Slide since 4.0, layout added at 4.31.

Layout of the slide.

Possible Values:"caption" |"cover" |"none"

Default Value:"caption"

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.

timeExtent Property timeExtent TimeExtentautocast Since: ArcGIS Maps SDK for JavaScript 4.30 Slide since 4.0, timeExtent added at 4.30.

The time extent of the scene.

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:

Array (or Collection) of Layer instances: [layerInstance, layerInstance]
Array (or Collection) of Layer IDs: ["layer-1", "layer-2"]

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

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.