Slide | References | ArcGIS Maps SDK for JavaScript

import Slide from "@arcgis/core/webscene/Slide.js";

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.id) to both operational layers from the scene as well as elevation layers from the Ground.layers, 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

Constructor

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

Parameters

Parameter	Type	Description	Required
properties	`SlideProperties`

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

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
`basemap`	`Basemap \| null \| undefined`
`declaredClass` readonly inherited	`string`	Accessor
`description`	`Description`
`elements`	`SlideElements`
`enabledFocusAreas`	`Collection<string> \| null \| undefined`
`environment`	`SlideEnvironment`
`ground`	`SlideGround \| null \| undefined`
`hidden`	`boolean`
`id`	`string`
`layout`	`SlideLayout`
`thumbnail`	`SlideThumbnail`
`timeExtent`	`TimeExtent \| null \| undefined`
`title`	`Title`
`viewpoint`	`Viewpoint`
`visibleLayers`	`Collection<SlideVisibleLayer>`

basemap

autocast Property

Type: Basemap | null | undefined

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

readonlyinherited Property

Type: string

Inherited from: Accessor

Since: ArcGIS Maps SDK for JavaScript 4.7

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

description

autocast Property

Type: Description

The description of the slide.

elements

autocast Property

Type: SlideElements

Since: ArcGIS Maps SDK for JavaScript 4.32

The elements object contains configurations for components set in a slide.

enabledFocusAreas

autocast Property

Type: Collection<string> | null | undefined

The enabled focus areas of the scene.

This is a collection of strings, storing references (by ID) to the focus areas that are enabled when the slide is applied to a SceneView.

Example

// Update the slide to only enable the first focus area in the map.
slide.enabledFocusAreas = [ view.map.focusAreas.areas.at(0).id ];

environment

autocast Property

Type: SlideEnvironment

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

ground

autocast Property

Type: SlideGround | null | undefined

Ground properties for this slide.

hidden

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 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

Type: string

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

layout

Property

Type: SlideLayout

Since: ArcGIS Maps SDK for JavaScript 4.31

Layout of the slide.

Default value: "caption"

thumbnail

autocast Property

Type: SlideThumbnail

A data URI encoded thumbnail.

timeExtent

autocast Property

Type: TimeExtent | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.30

The time extent of the scene.

title

autocast Property

Type: Title

The title of the slide.

viewpoint

autocast Property

Type: Viewpoint

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

autocast Property

Type: Collection<SlideVisibleLayer>

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.

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)];

Methods

Method	Signature	Class
`createFrom` static	`createFrom(view: SceneView, options?: SlideCreateFromOptions): Promise<Slide>`
`fromJSON` inherited static	`fromJSON(json: any): any`	JSONSupportMixin
`applyTo`	`applyTo(view: SceneView, options?: GoToOptions3D): Promise<Slide>`
`clone`	`clone(): this`
`emit` inherited	`emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean`	EventedMixin
`hasEventListener` inherited	`hasEventListener<Type extends EventNames<this>>(type: Type): boolean`	EventedMixin
`on` inherited	`on<Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle`	EventedMixin
`toJSON` inherited	`toJSON(): any`	JSONSupportMixin
`updateFrom`	`updateFrom(view: SceneView, options?: SlideUpdateFromOptions): Promise<Slide>`

createFrom

static Method

Signature: createFrom (view: SceneView, options?: SlideCreateFromOptions): Promise<Slide>

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

Default screenshot settings are { quality: 80, width: 120, height: 75, format: "png" }

Parameters

Parameter	Type	Description	Required
view	`SceneView`	The SceneView from which the slide should be created.
options	`SlideCreateFromOptions`	Creation options. See properties below for object specifications.

Returns: 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);
  });

fromJSON

inheritedstatic Method

Signature: fromJSON (json: any): any

Inherited from: JSONSupportMixin

Creates a new instance of this class and initializes it with values from a JSON object generated from an ArcGIS product. The object passed into the input json parameter often comes from a response to a query operation in the REST API or a toJSON() method from another ArcGIS product. See the Using fromJSON() topic in the Guide for details and examples of when and how to use this function.

Parameters

Parameter	Type	Description	Required
json	`any`	A JSON representation of the instance in the ArcGIS format. See the ArcGIS REST API documentation for examples of the structure of various input JSON objects.

Returns: any
Returns a new instance of this class.

applyTo

Method

Signature: applyTo (view: SceneView, options?: GoToOptions3D): Promise<Slide>

Applies a slide's settings to a SceneView.

Parameters

Parameter	Type	Description	Required
view	`SceneView`	The SceneView the slide should be applied to.
options	`GoToOptions3D`	Animation options. See properties below for object specifications.

Returns: 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

Signature: clone (): this

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

Returns: this
A new Slide instance.

emit

inherited Method

Signature: emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Since: ArcGIS Maps SDK for JavaScript 4.5

Emits an event on the instance. This method should only be used when creating subclasses of this class.

Parameters

Parameter	Type	Description	Required
type	`Type`	The name of the event.
event	`this["@eventTypes"][Type]`	The event payload.

Returns: boolean
true if a listener was notified

hasEventListener

inherited Method

Signature: hasEventListener <Type extends EventNames<this>>(type: Type): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Indicates whether there is an event listener on the instance that matches the provided event name.

Parameters

Parameter	Type	Description	Required
type	`Type`	The name of the event.

Returns: boolean
Returns true if the class supports the input event.

on

inherited Method

Signature: on <Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Registers an event handler on the instance. Call this method to hook an event with a listener.

Parameters

Parameter	Type	Description	Required
type	`Type`	An event or an array of events to listen for.
listener	`EventedCallback<this["@eventTypes"][Type]>`	The function to call when the event fires.

Returns

ResourceHandle

Returns an event handler with a remove() method that should be called to stop listening for the event(s).

Property	Type	Description
remove	Function	When called, removes the listener from the event.

Example

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

toJSON

inherited Method

Signature: toJSON (): any

Inherited from: JSONSupportMixin

Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() guide topic for more information.

Returns: any
The ArcGIS portal JSON representation of an instance of this class.

updateFrom

Method

Signature: updateFrom (view: SceneView, options?: SlideUpdateFromOptions): 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.

Default screenshot settings are { quality: 80, width: 120, height: 75, format: "png" }

Parameters

Parameter	Type	Description	Required
view	`SceneView`	The SceneView from which the slide should update.
options	`SlideUpdateFromOptions`	Update options. See properties below for object specifications.

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

Events

Name	Type
`apply-slide-cancel`	CustomEvent<void>
`apply-slide-complete`	CustomEvent<void>
`apply-slide-start`	CustomEvent<void>

apply-slide-cancel

Event

apply-slide-cancel: CustomEvent<void>

Since: ArcGIS Maps SDK for JavaScript 5.0

Emitted just after applying the slide was interrupted. In this case the apply-slide-complete event is not emitted.

See also

applyTo()

apply-slide-complete

Event

apply-slide-complete: CustomEvent<void>

Since: ArcGIS Maps SDK for JavaScript 5.0

Emitted just after applying the slide has successfully completed. If applying the slide is interrupted then the apply-slide-cancel event is emitted instead.

See also

applyTo()

apply-slide-start

Event

apply-slide-start: CustomEvent<void>

Since: ArcGIS Maps SDK for JavaScript 5.0

Emitted just before starting to apply the slide to the view.

See also

applyTo()

Type definitions

SlideLayout

Type definition

Type: "caption" | "cover" | "none"

SlideUpdateFromOptions

Type definition

screenshot

Property

Type: Partial<ScreenshotUserSettings>

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

SlideCreateFromOptions

Type definition

screenshot

Property

Type: Partial<ScreenshotUserSettings>

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