arcgis-scene | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/map-components/components/arcgis-scene";

Inheritance:: ArcgisScene→PublicLitElement

Since: ArcGIS Maps SDK for JavaScript 4.28

The ArcGIS Scene component is used to add 3D maps to web applications. For 2D maps, use the arcgis-map.

The Scene component creates a SceneView and loads a WebScene item from either ArcGIS Online or ArcGIS Enterprise portal.

<arcgis-scene item-id="e2da7564e4f24eaaa918ffd70378056a"></arcgis-scene>

Alternatively, the Scene component can be initialized without a WebScene item:

<arcgis-scene
  basemap="satellite"
  ground="world-elevation"
  camera-position="12.3808, 46.3959, 4400"
  camera-tilt="75"
  camera-heading="300">
</arcgis-scene>

Further components can be added and connected to the Scene component:

<arcgis-scene item-id="e2da7564e4f24eaaa918ffd70378056a">
   <arcgis-layer-list slot="bottom-right"></arcgis-layer-list>
</arcgis-scene>

The Scene component can be customized further using any of the core API functionalities of the ArcGIS Maps SDK for JavaScript.

const viewElement = document.querySelector("arcgis-scene");
await viewElement.viewOnReady();
// The view is now ready to be used.
const layer = new GraphicsLayer({ title: "My layer"});
viewElement.map.add(layer);

See also

Demo

Properties

Property	Attribute	Type
`allLayerViews` readonly		`ReadonlyCollection<LayerView>`
`alphaCompositingEnabled`	`alpha-compositing-enabled`	`boolean`
`analyses`		`Collection<Analysis>`
`animationsDisabled`	`animations-disabled`	`boolean`
`aria`		`SceneView["aria"]`
`attributionItems` readonly		`SceneView["attributionItems"]`
`attributionMode`	`attribution-mode`	`"dark" \| "light" \| null \| undefined`
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`basemap`	`basemap`	`Basemap \| string \| undefined`
`basemapView`		`BasemapView<LayerView>`
`camera`		`Camera`
`cameraFov`	`camera-fov`	`null \| undefined \| number`
`cameraHeading`	`camera-heading`	`null \| undefined \| number`
`cameraPosition`	`camera-position`	`null \| undefined \| number[] \| Point \| string`
`cameraTilt`	`camera-tilt`	`null \| undefined \| number`
`canZoomIn` readonly		`boolean`
`canZoomOut` readonly		`boolean`
`center`	`center`	`SceneView["center"]`
`clippingArea`		`Extent \| null \| undefined`
`constraints`		`Constraints`
`displayFilterDisabled`	`display-filter-disabled`	`boolean`
`environment`		`Environment`
`extent`		`SceneView["extent"]`
`fatalError`		`Error<any> \| null \| undefined`
`floors`		`Collection<string>`
`focusAreas`		`FocusAreas`
`gamepad` readonly		`GamepadSettings`
`graphics`		`Collection<Graphic>`
`ground`	`ground`	`Ground`
`groundView` readonly		`GroundView`
`hideAttribution`	`hide-attribution`	`boolean`
`highlights`		`Collection<HighlightOptions>`
`interacting` readonly		`boolean`
`itemId` reflected	`item-id`	`null \| undefined \| string`
`layerViews` readonly		`Collection<LayerView>`
`loadErrorSources`		`LoadErrorSource[] \| undefined`
`magnifier` readonly		`Magnifier`
`map`		`Map \| null \| undefined`
`navigating` readonly		`boolean`
`navigation`		`Navigation`
`padding`		`ViewPadding`
`performanceInfo` readonly		`SceneViewPerformanceInfo`
`popup`		`Popup \| null \| undefined`
`popupComponentEnabled`	`popup-component-enabled`	`boolean`
`popupDisabled`	`popup-disabled`	`boolean`
`popupElement` readonly		`ArcgisPopup \| null`
`qualityProfile`	`quality-profile`	`"medium" \| "low" \| "high"`
`ready` readonly		`boolean`
`resolution` readonly		`number`
`scale`	`scale`	`number`
`selectionManager` readonly		`SelectionManager`
`spatialReference`		`SpatialReference`
`stationary` readonly		`boolean`
`suspended` readonly reflected	`suspended`	`boolean`
`theme`		`Theme \| null \| undefined`
`timeExtent`		`TimeExtent \| null \| undefined`
`updating` readonly		`boolean`
`view` readonly		`SceneView`
`viewingMode`	`viewing-mode`	`"global" \| "local"`
`viewpoint`		`Viewpoint`
`visibleArea` readonly		`Polygon \| null \| undefined`
`zoom`	`zoom`	`number`

allLayerViews

readonly Property

Type: ReadonlyCollection<LayerView>

Collection containing a flat list of all the created LayerViews related to the basemap, operational layers, and group layers in this view.

See also

LayerView

alphaCompositingEnabled

Property

Type: boolean

Allows the view to be partially or fully transparent when composited with the webpage elements behind it.

This property can only be set once at construction time. When alpha compositing is enabled, web scenes are less performant. It is important to set this property to true only when you need to apply transparency on the view.

Attribute: alpha-compositing-enabled
Default value: false

Example

// create a view with a fully transparent background
let view = new SceneView({
 map: map,
 alphaCompositingEnabled: true,
 environment: {
   background: {
     type: "color",
     color: [0, 0, 0, 0]
   },
   starsEnabled: false,
   atmosphereEnabled: false
 }
})

analyses

Property

Type: Collection<Analysis>

A collection of analyses associated with the view.

Examples

// Adds an analysis to the View
view.analyses.add(lineOfSightAnalysis);

// Removes an analysis from the View
view.analyses.remove(lineOfSightAnalysis);

animationsDisabled

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether animations are disabled in the view. This includes animated symbols (animated CIMSymbol, PictureMarkerSymbol from a GIF/animated PNG), animated renderers (FlowRenderer), animated layers (MediaLayer, VideoLayer), and animations triggered by view navigation (for example, goTo()). Setting this property to true disables all animations in the view.

Attribute: animations-disabled
Default value: false

aria

Property

Type: SceneView["aria"]

Since: ArcGIS Maps SDK for JavaScript 4.34

The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: label, description, describedByElements, and labelledByElements.

attributionItems

readonly Property

Type: SceneView["attributionItems"]

Since: ArcGIS Maps SDK for JavaScript 5.0

The attribution items displayed in the view's attribution.

attributionMode

Property

Type: "dark" | "light" | null | undefined

Since: ArcGIS Maps SDK for JavaScript 5.0

The light or dark mode used to display the attribution. By default, the mode is inherited from the Calcite's mode. You can override the value to style the attribution alongside the map or scene content.

Attribute: attribution-mode

autoDestroyDisabled

Property

Type: boolean

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy() method when you are done to prevent memory leaks.

Attribute: auto-destroy-disabled
Default value: false

basemap

Property

Type: Basemap | string | undefined

Specifies a basemap for the map. The basemap is a set of layers that give geographic context to the view and the other operational layers in the map. It can either be set using a basemap ID string (see values), Basemap or BasemapStyle.

Attribute: basemap

basemapView

Property

Type: BasemapView<LayerView>

Represents the view for a single basemap after it has been added to the map.

camera

Property

Type: Camera

The camera allows to set the observation point from which the visible portion (or perspective) of the view is determined. When set in the constructor, this property overrides the center, extent, scale, viewpoint, and zoom properties.

Setting the camera immediately changes the current view. For animating the view, see this component's goTo() method.

cameraFov

Property

Type: null | undefined | number

The diagonal field of view (fov) angle for the camera. The range of angles must be between 1 and 170 degrees.

Setting the camera fov immediately changes the current view. For animating the view, see this component's goTo() method.

Attribute: camera-fov

cameraHeading

Property

Type: null | undefined | number

The compass heading of the camera in degrees.

Setting the camera heading immediately changes the current view. For animating the view, see this component's goTo() method.

Attribute: camera-heading

cameraPosition

Property

Type: null | undefined | number[] | Point | string

The position of the camera defined by a map point. It can either be set with a Point instance or a string in the format: longitude, latitude, elevation. E.g. "12.3808, 46.3959, 4400".

Setting the camera position immediately changes the current view. For animating the view, see this component's goTo() method.

Attribute: camera-position

cameraTilt

Property

Type: null | undefined | number

The tilt of the camera in degrees with respect to the surface as projected down from the camera position.

Setting the camera tilt immediately changes the current view. For animating the view, see this component's goTo() method.

Attribute: camera-tilt

canZoomIn

readonly Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates if the view component can zoom in.

Default value: false

canZoomOut

readonly Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates if the view component can zoom out.

Default value: false

center

autocast Property

Type: SceneView["center"]

Represents the center point of the view. It can be a string with the format "<longitude>, <latitude>" or a Point instance.

Setting the center immediately changes the current view. For animating the view, see this component's goTo() method.

Attribute: center

clippingArea

Property

Type: Extent | null | undefined

Represents an optional clipping area used to define the visible extent of a Scene in local viewingMode.

See also

Example

let extent = view.extent.clone();

// Expand the extent in place, reducing it to 50% of its original size and set it as the clippingArea
view.clippingArea = extent.expand(0.5);

constraints

Property

Type: Constraints

Specifies constraints for the camera's tilt, altitude, and view's clip distance.

See also

Sample - Custom background for SceneView (altitude)

displayFilterDisabled

Property

Type: boolean

Indicates whether a layer's displayFilter is honored when rendering layers in the view. If false, the display filters are ignored and all features are rendered.

Attribute: display-filter-disabled
Default value: false

environment

Property

Type: Environment

Specifies various properties of the environment's visualization within the view, including lighting, background, weather, and more. The Scene will redraw automatically when any property of environment changes.

Modifying the lighting:

viewElement.environment.lighting = {
   type: "sun", // autocasts as new SunLighting()
   date: new Date(), // sets the lighting to reflect the current time of day
   directShadowsEnabled: true,
};

Setting the background:

viewElement.environment = {
  background: {
     type: "color",
     color: [255, 252, 244, 1]
  },
   starsEnabled: false,
   atmosphereEnabled: false
};

Changing the weather in the scene:

viewElement.environment.weather = {
   type: "rainy", // autocasts as new RainyWeather({ cloudCover: 0.7, precipitation: 0.3 })
   cloudCover: 0.7,
   precipitation: 0.3
};

See also

extent

Property

Type: SceneView["extent"]

The extent represents the visible portion of a map within the view as an instance of Extent.

Setting the extent immediately changes the view without animation. To animate the view, see this component's goTo() method. When the view is rotated, the extent does not update to include the newly visible portions of the map.

fatalError

Property

Type: Error<any> | null | undefined

A rejected view indicates a fatal error making it unable to display.

See also

tryFatalErrorRecovery()

Example

reactiveUtils.when(
  () => view.fatalError,
  () => {
    console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
    view.tryFatalErrorRecovery();
  }
);

floors

Property

Type: Collection<string>

Applies a display filter on the view for a specific set of floor levels. It can filter the map display on floor-aware layers by zero or more level IDs.

focusAreas

Property

Type: FocusAreas

Since: ArcGIS Maps SDK for JavaScript 4.33

A container of all focus areas present in the map.

gamepad

readonly Property

Type: GamepadSettings

Gamepad input specific configuration settings.

graphics

Property

Type: Collection<Graphic>

Allows for adding graphics directly to the default graphics in the view.

See also

Example

// Adds a graphic to the View
graphics.add(pointGraphic);
// Removes a graphic from the View
graphics.remove(pointGraphic);

ground

autocast Property

Type: Ground

Specifies the surface properties for the map. It can be either a Ground instance or a string with one of the following values:

"world-elevation"
"world-topobathymetry"

See also

Attribute: ground

Examples

// Use the world elevation service
const map = new Map({
  basemap: "topo-vector",
  ground: "world-elevation"
});

// Create a map with the world elevation layer overlaid by a custom elevation layer
const worldElevation = new ElevationLayer({
  url: "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
});
const customElevation = new ElevationLayer({
  url: "https://my.server.com/arcgis/rest/service/MyElevationService/ImageServer"
});
const map = new Map({
  basemap: "topo-vector",
  ground: new Ground({
   layers: [ worldElevation, customElevation ]
  })
});

groundView

readonly Property

Type: GroundView

The view for the ground of the map.

hideAttribution

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the attribution is hidden in the view.

Esri requires that when you use an ArcGIS Online basemap in your app, the map must include Esri attribution and you must be licensed to use the content. For detailed guidelines on working with attribution, please visit the official attribution in your app documentation. For information on terms of use, see the Terms of Use FAQ.

Attribute: hide-attribution
Default value: false

highlights

Property

Type: Collection<HighlightOptions>

Since: ArcGIS Maps SDK for JavaScript 4.32

Represents a collection of HighlightOptions objects which can be used to highlight features throughout an application. Highlighting works by applying highlight options to one or more features. You can configure these options (such as color or opacity) to define how a feature will be visually emphasized.

A maximum of six HighlightOptions objects are supported in the collection, and they can be added, removed, and reordered freely. Their order in the collection determines priority, with the last object having the highest priority. If you apply more than one highlight to a feature, the one that is last within the collection will be applied. The HighlightOptions object must be part of this collection in order to be applied to features.

To highlight a feature, use the highlight method on the relevant LayerView instance. To apply specific HighlightOptions, include the name in the highlight() method's options parameter. If no name is provided, the feature will use the default highlight options.

The table below shows the default highlight options in the View's highlights collection if the collection has not been modified:

Highlight options name	Description	Default settings
default	The default highlight options. Used when `layerView.highlight()` is called without specifying any particular highlight options.	`{ name: "default", color: "cyan", haloOpacity: 1, fillOpacity: 0.25, shadowColor: "black", shadowOpacity: 0.4, shadowDifference: 0.2}`
temporary	The temporary highlight options, pre-configured for common use cases such as hovering over a feature in the view.	`{ name: "temporary", color: "yellow", haloOpacity: 1, fillOpacity: 0.25, shadowColor: "black", shadowOpacity: 0.4, shadowDifference: 0.2 }`

See also

Examples

// Use the default highlights collection to apply a highlight to features when you hover over them

// A handler can be used to remove any previous highlight when applying a new one
let hoverHighlight;

view.on("pointer-move", (event) => {
  // Search for the first feature in the featureLayer at the hovered location
  view.hitTest(event, { include: featureLayer }).then((response) => {
    if (response.results[0]) {
       const graphic = response.results[0].graphic;
       view.whenLayerView(graphic.layer).then((layerView) => {
         // Remove any previous highlight, if it exists
         hoverHighlight?.remove();
         // Highlight the hit features with the temporary highlight options, which are pre-configured for this use case
         hoverHighlight = layerView.highlight(graphic, { name: "temporary"});
       });
    }
  });
});

// Override the default highlights collection

const view = new MapView({
  map: map,
  container: "viewDiv",

  // Set the highlight options to be used in the view
  highlights: [
    { name: "default", color: "orange" },
    { name: "temporary", color: "magenta" },
    { name: "table", color: "cyan", fillOpacity: 0.5, haloOpacity: 0}
  ]
});

// Add highlight options to the collection after initialization

const selectionHighlightOptions = {
  name: "selection",
  color: "#ff00ff", // bright fuchsia
  haloOpacity: 0.8,
  fillOpacity: 0.2
};

// Add the options to the highlights collection at the first position
view.highlights.add(selectionGroup, 0);

interacting

readonly Property

Type: boolean

Indication whether the view is being interacted with (for example when panning or by an interactive tool).

Default value: false

itemId

reflected Property

Type: null | undefined | string

The ID of a WebScene item from either ArcGIS Online or ArcGIS Enterprise portal.

To configure the portal url you must set the config.portalUrl property before the Scene component loads.

Attribute: item-id

layerViews

readonly Property

Type: Collection<LayerView>

A collection containing a hierarchical list of all the created LayerViews of the operational layers in the map.

See also

LayerView

loadErrorSources

Property

Type: LoadErrorSource[] | undefined

Since: ArcGIS Maps SDK for JavaScript 4.34

An array of objects that encountered an error while loading the component or any of its dependencies (e.g., basemap, ground, layers, tables). You may inspect the errors by accessing each object's loadError property.

magnifier

readonly Property

Type: Magnifier

The magnifier allows for showing a portion of the view as a magnifier image on top of the view.

map

Property

Type: Map | null | undefined

An instance of a Map object to display in the view.

navigating

readonly Property

Type: boolean

Indication whether the view is being navigated (for example when panning).

Default value: false

Property

Type: Navigation

Options to configure the navigation behavior of the view.

// Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.
const view = new MapView({
  container: "viewDiv",
  map: new Map({
    basemap: "satellite"
  }),
  center: [176.185, -37.643],
  zoom: 13,
  navigation: {
    gamepad: {
      enabled: false
    },
    actionMap: {
      dragSecondary: "none", // Disable rotating the view with the right mouse button
      mouseWheel: "none" // Disable zooming with the mouse wheel
    },
    browserTouchPanEnabled: false,
    momentumEnabled: false,
  }
});

padding

Property

Type: ViewPadding

Use the padding property to make the center, and extent, etc. work off a subsection of the full view.

Default value: {left: 0, top: 0, right: 0, bottom: 0}

performanceInfo

readonly Property

Type: SceneViewPerformanceInfo

This property contains performance information of the view, e.g. global memory usage and additional details for layers about memory consumption and number of features.

Property

Type: Popup | null | undefined

A Popup widget object that displays general content or attributes from layers in the map. Consider using the popupElement (beta), which represents the Popup component, instead.

By default, the popup property is an empty object that allows you to set the popup options. A Popup instance is automatically created and assigned to the view's popup when the user clicks on the view and popupEnabled is true, when the openPopup() method is called, or when some widgets need the popup, such as Search. If popup is null, the popup instance will not be created.

See also

popupComponentEnabled

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

beta

Indicates whether the popup component (beta) is enabled as the default popup. When set to true, the popupElement property (representing the component) will be used for popups instead of the popup property (representing the widget).

Note: This is a beta feature and may change in future releases. At version 6.0, the Popup component will be used by default instead of the Popup widget and the popup-component-enabled attribute will no longer be necessary.

See also

popupElement

Attribute: popup-component-enabled
Default value: false

Example

<arcgis-map item-id="WEBMAP-ID" popup-component-enabled></arcgis-map>

popupDisabled

Property

Type: boolean

Controls whether the default popup opens automatically when users click on the view. This controls both the popupElement and popup properties. When set to true, the popup will not open on click or when triggered programmatically.

See also

openPopup()

Attribute: popup-disabled
Default value: false

popupElement

readonly Property

Type: ArcgisPopup | null

Since: ArcGIS Maps SDK for JavaScript 5.0

beta

A reference to the current arcgis-popup (beta). The popupComponentEnabled property must be set to true to use this property.

Note: This is a beta feature and may change in future releases.

See also

popupComponentEnabled

Example

<arcgis-map item-id="WEBMAP-ID" popup-component-enabled></arcgis-map>
<script type="module">
const viewElement = document.querySelector("arcgis-map");
await viewElement.viewOnReady();
viewElement.popupElement.dockEnabled = true;
viewElement.popupElement.dockOptions = {
    buttonEnabled: false,
    breakpoint: false,
    position: "top-right",
};
</script>

qualityProfile

Property

Type: "medium" | "low" | "high"

Scenes can be drawn in three different quality modes: high, medium and low.

Attribute: quality-profile

Example

let view = new SceneView({
  qualityProfile: "high"
});

ready

readonly Property

Type: boolean

When true, this property indicates whether the view successfully satisfied all dependencies, signaling that the necessary conditions are met.

See also

when()

Default value: false

resolution

readonly Property

Type: number

Represents the current value of one pixel in the unit of the view's spatialReference. The resolution is calculated by dividing the Scene component's extent width by its width.

scale

Property

Type: number

Represents the map scale at the center of the view.

Setting the scale immediately changes the view. For animating the view, see this component's goTo() method.

Attribute: scale

selectionManager

readonly Property

Type: SelectionManager

Since: ArcGIS Maps SDK for JavaScript 5.0

beta

The default SelectionManager for this view. Used to manage selections of features across layers.

spatialReference

Property

Type: SpatialReference

The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map. In a Scene, the following coordinate systems are available.

The spatial reference can either be set explicitly or automatically derived from the following:

If the map is a WebScene instance, the WebScene.initialViewProperties.spatialReference is used.
Otherwise, the spatial reference is derived from the first layer that loads in this order:

Notes

In case the spatial reference is determined from the map layers or the ground layers and they are in WGS84 or Web Mercator, the following rule also applies: the first layer that does not support server side reprojection (tiled layers) determines the spatial reference of the view and all the other layers are reprojected.
If no spatial reference can be derived, then the view does not resolve and the ready property is false.
Prior to changing the spatial reference, check if the projectOperator is loaded by calling projectOperator.isLoaded() method. If it is not yet loaded, call projectOperator.load() method.

Example

const viewElement = document.querySelector("arcgis-scene");
// Check if the projectOperator is loaded
if (!projectOperator.isLoaded()) {
   await projectOperator.load();
}
// Change the spatial reference of the scene component to GCS2000
viewElement.spatialReference = new SpatialReference({
  wkid: 4490 //GCS2000
});

stationary

readonly Property

Type: boolean

Indication whether the view is animating, being navigated with or resizing.

Default value: false

suspended

readonlyreflected Property

Type: boolean

Indicates if the view is visible on the page.

Attribute: suspended
Default value: false

theme

Property

Type: Theme | null | undefined

This property specifies the base colors used by some components to render graphics and labels. This only affects those elements that would otherwise use the default orange pattern.

See also

Example

// Update the theme to use purple graphics
// and slightly transparent green text
view.theme = new Theme({
  accentColor: "purple",
  textColor: [125, 255, 13, 0.9]
});

timeExtent

Property

Type: TimeExtent | null | undefined

The view's time extent. Time-aware layers display their temporal data that falls within the view's time extent. Setting the view's time extent is similar to setting the spatial extent because once the time extent is set, the view updates automatically to conform to the change.

Example

// Create a csv layer from an online spreadsheet.
let csvLayer = new CSVLayer({
  url: "http://test.com/daily-magazines-sold-in-new-york.csv",
  timeInfo: {
    startField: "SaleDate" // The csv field contains date information.
  }
});

// Create a mapview showing sales for the last week of March 2019 only.
const view = new MapView({
  map: map,
  container: "viewDiv",
  timeExtent: {
    start: new Date("2019, 2, 24"),
    end:   new Date("2019, 2, 31")
  }
});

updating

readonly Property

Type: boolean

Indicates whether the view is being updated by additional data requests to the network, or by processing received data.

Default value: false

view

readonly Property

Type: SceneView

The SceneView instance created and managed by the component. Accessible once the component is fully loaded.

viewingMode

Property

Type: "global" | "local"

The viewing mode sets whether the view renders the earth as a sphere (global mode) or on a flat plane (local mode).

Note that the viewing mode must be set before the Scene component loads. Depending on the viewing mode different supported coordinate systems are available.

See also

Attribute: viewing-mode
Default value: "global"

viewpoint

Property

Type: Viewpoint

Represents the current view as a Viewpoint or point of observation on the view.

Setting the viewpoint immediately changes the current view. For animating the view, see this component's goTo() method.

visibleArea

readonly Property

Type: Polygon | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.31

The visibleArea represents the visible portion of a map within the view as an instance of a Polygon.

See also

zoom

Property

Type: number

Represents the level of detail (LOD) at the center of the view.

Setting the zoom immediately changes the current view. For animating the view, see this component's goTo() method. Setting this property in conjunction with center is a convenient way to set the initial extent of the view.

Attribute: zoom

Methods

Method	Signature
`closePopup`	`closePopup(): Promise<void>`
`componentOnReady` inherited	`componentOnReady(): Promise<this>`
`destroy`	`destroy(): Promise<void>`
`goTo`	`goTo(target: GoToTarget3D, options?: GoToOptions3D): Promise<unknown>`
`hitTest`	`hitTest(screenPoint: MouseEvent \| ScreenPoint, options?: HitTestOptions3D): Promise<SceneViewHitTestResult>`
`openPopup`	`openPopup(options?: ViewPopupOpenOptions): Promise<void>`
`takeScreenshot`	`takeScreenshot(options?: UserSettings): Promise<Screenshot>`
`toMap`	`toMap(screenPoint: MouseEvent \| ScreenPoint, options?: HitTestOptions3D): Point \| null \| undefined`
`toScreen`	`toScreen(point: Point): ScreenPoint`
`tryFatalErrorRecovery`	`tryFatalErrorRecovery(): Promise<void>`
`viewOnReady`	`viewOnReady(callback?: () => void, errback?: (error: Error) => void): Promise<void>`
`whenAnalysisView`	`whenAnalysisView<AnalysisType extends Analysis>(analysis: AnalysisType): Promise<AnalysisView3DFor<AnalysisType>>`
`whenLayerView`	`whenLayerView<TLayer extends Layer>(layer: TLayer): Promise<Layer extends TLayer ? LayerView : LayerView3DFor<TLayer>>`
`zoomIn`	`zoomIn(): Promise<void>`
`zoomOut`	`zoomOut(): Promise<void>`

closePopup

Method

Signature: closePopup (): Promise<void>

Closes the popup.

Returns: Promise<void>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: PublicLitElement

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisScene = document.querySelector("arcgis-scene");
document.body.append(arcgisScene);
await arcgisScene.componentOnReady();
console.log("arcgis-scene is ready to go!");

destroy

Method

Signature: destroy (): Promise<void>

Destroys the Scene component, and any associated resources, including its map, popup, and removes components or other UI DOM elements added to it.

Returns: Promise<void>

goTo

Method

Signature: goTo (target: GoToTarget3D, options?: GoToOptions3D): Promise<unknown>

Sets the view to a given target.

Parameter	Type	Description	Required
target	`GoToTarget3D`
options	`GoToOptions3D`

Returns: Promise<unknown>

hitTest

Method

Signature: hitTest (screenPoint: MouseEvent | ScreenPoint, options?: HitTestOptions3D): Promise<SceneViewHitTestResult>

Returns hit test results from each layer that intersects the specified screen coordinates.

viewElement.addEventListener("arcgisViewClick", (event) => {
   viewElement.hitTest(event.detail).then((response) => {
      const result = response.results[0];
      if (result?.type === "graphic") {
         const { longitude, latitude } = result.mapPoint;
         console.log("Hit graphic at (" + longitude + ", " + latitude + ")", result.graphic);
      } else {
         console.log("Did not hit any graphic");
      }
   });
});

Parameter	Type	Description	Required
screenPoint	`MouseEvent \| ScreenPoint`
options	`HitTestOptions3D`

Returns: Promise<SceneViewHitTestResult>

openPopup

Method

Signature: openPopup (options?: ViewPopupOpenOptions): Promise<void>

Opens the popup based on input options.

Parameter	Type	Description	Required
options	`ViewPopupOpenOptions`

Returns: Promise<void>

takeScreenshot

Method

Signature: takeScreenshot (options?: UserSettings): Promise<Screenshot>

Creates a screenshot of the current view.

Parameter	Type	Description	Required
options	`UserSettings`

Returns: Promise<Screenshot>

toMap

Method

Signature: toMap (screenPoint: MouseEvent | ScreenPoint, options?: HitTestOptions3D): Point | null | undefined

Converts the given screen point to a map point.

Parameters

Parameter	Type	Description	Required
screenPoint	`MouseEvent \| ScreenPoint`
options	`HitTestOptions3D`

Returns: Point | null | undefined

toScreen

Method

Signature: toScreen (point: Point): ScreenPoint

Converts the given map point to a screen point.

Parameters

Parameter	Type	Description	Required
point	`Point`

Returns: ScreenPoint

tryFatalErrorRecovery

Method

Signature: tryFatalErrorRecovery (): Promise<void>

Call this method to clear any fatal errors resulting from a lost WebGL context.

Returns: Promise<void>

viewOnReady

Method

Signature: viewOnReady (callback?: () => void, errback?: (error: Error) => void): Promise<void>

Since: ArcGIS Maps SDK for JavaScript 4.33

viewOnReady() may be leveraged once an instance of the component and its underlying view is created and ready. This method takes two input parameters, a callback function and an errback function, and returns a promise. The callback executes when the promise resolves, and the errback executes if the promise is rejected.

See also

Watch for changes - waiting for components or views to be ready

Parameters

Parameter	Type	Description	Required
callback	`() => void`
errback	`(error: Error) => void`

Returns: Promise<void>

Example

const viewElement = document.querySelector("arcgis-scene");
await viewElement.viewOnReady();
// The view is now ready to be used.
viewElement.map.add(new FeatureLayer({...}));

whenAnalysisView

Method

Signature: whenAnalysisView <AnalysisType extends Analysis>(analysis: AnalysisType): Promise<AnalysisView3DFor<AnalysisType>>

Type parameters: <AnalysisType extends Analysis>

Gets the analysis view created for the given analysis object.

Parameter	Type	Description	Required
analysis	`AnalysisType`

Returns: Promise<AnalysisView3DFor>

whenLayerView

Method

Signature: whenLayerView <TLayer extends Layer>(layer: TLayer): Promise<Layer extends TLayer ? LayerView : LayerView3DFor<TLayer>>

Type parameters: <TLayer extends Layer>

Gets the layer view created on the view for the given layer.

Parameter	Type	Description	Required
layer	`TLayer`

Returns: Promise<Layer extends TLayer ? LayerView : LayerView3DFor>

zoomIn

Method

Signature: zoomIn (): Promise<void>

Since: ArcGIS Maps SDK for JavaScript 5.0

Zooms in the view component by a factor of 2.

Returns: Promise<void>

zoomOut

Method

Signature: zoomOut (): Promise<void>

Since: ArcGIS Maps SDK for JavaScript 5.0

Zooms out the view component by a factor of 2.

Returns: Promise<void>

Events

Name	Type
`arcgisLoadError`	CustomEvent<void>
`arcgisViewAnalysisViewCreate`	CustomEvent<AnalysisViewCreateEvent>
`arcgisViewAnalysisViewCreateError`	CustomEvent<AnalysisViewCreateErrorEvent>
`arcgisViewAnalysisViewDestroy`	CustomEvent<AnalysisViewDestroyEvent>
`arcgisViewChange`	CustomEvent<void>
`arcgisViewClick`	CustomEvent<ClickEvent>
`arcgisViewDoubleClick`	CustomEvent<DoubleClickEvent>
`arcgisViewDoubleTapDrag`	CustomEvent<DoubleTapDragEvent>
`arcgisViewDrag`	CustomEvent<DragEvent>
`arcgisViewHold`	CustomEvent<HoldEvent>
`arcgisViewImmediateClick`	CustomEvent<ImmediateClickEvent>
`arcgisViewImmediateDoubleClick`	CustomEvent<ImmediateDoubleClickEvent>
`arcgisViewKeyDown`	CustomEvent<KeyDownEvent>
`arcgisViewKeyUp`	CustomEvent<KeyUpEvent>
`arcgisViewLayerviewCreate`	CustomEvent<LayerViewCreateEvent>
`arcgisViewLayerviewCreateError`	CustomEvent<LayerViewCreateErrorEvent>
`arcgisViewLayerviewDestroy`	CustomEvent<LayerViewDestroyEvent>
`arcgisViewMouseWheel`	CustomEvent<ViewMouseWheelEvent>
`arcgisViewPointerDown`	CustomEvent<PointerDownEvent>
`arcgisViewPointerEnter`	CustomEvent<PointerEnterEvent>
`arcgisViewPointerLeave`	CustomEvent<PointerLeaveEvent>
`arcgisViewPointerMove`	CustomEvent<PointerMoveEvent>
`arcgisViewPointerUp`	CustomEvent<PointerUpEvent>
`arcgisViewReadyChange`	CustomEvent<void>
`arcgisViewReadyError`	CustomEvent<void>
`arcgisViewVerticalTwoFingerDrag`	CustomEvent<VerticalTwoFingerDragEvent>

arcgisLoadError

Event

arcgisLoadError: CustomEvent<void>

Since: ArcGIS Maps SDK for JavaScript 4.34

Fires when an arcgis-scene fails to load or if one of its dependencies fails to load (e.g., basemap, ground, layers).

See also

loadErrorSources

Example

viewElement.addEventListener("arcgisLoadError", () => {
  console.log(viewElement.loadErrorSources);
});

arcgisViewAnalysisViewCreate

Event

arcgisViewAnalysisViewCreate: CustomEvent<AnalysisViewCreateEvent>

Fires when the view for an analysis is created.

arcgisViewAnalysisViewCreateError

Event

arcgisViewAnalysisViewCreateError: CustomEvent<AnalysisViewCreateErrorEvent>

Fires when an error occurs during the creation of an analysis view after an analysis is added to the view.

arcgisViewAnalysisViewDestroy

Event

arcgisViewAnalysisViewDestroy: CustomEvent<AnalysisViewDestroyEvent>

Fires after an analysis view is destroyed.

arcgisViewChange

Event

arcgisViewChange: CustomEvent<void>

This event is for view related property changes: zoom, scale, center, extent, camera, viewpoint. This event will also emit if stationary toggles from true to false.

arcgisViewClick

Event

arcgisViewClick: CustomEvent<ClickEvent>

Fires after a user clicks on the view.

viewElement.addEventListener("arcgisViewClick", (event) => {
   viewElement.hitTest(event.detail).then((response) => {
      const result = response.results[0];
      // ....
   });
});

arcgisViewDoubleClick

Event

arcgisViewDoubleClick: CustomEvent<DoubleClickEvent>

Fires after double-clicking on the view.

arcgisViewDoubleTapDrag

Event

arcgisViewDoubleTapDrag: CustomEvent<DoubleTapDragEvent>

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires while the pointer is dragged following a double-tap gesture on the view.

viewElement.addEventListener("arcgisViewDoubleTapDrag", (event) => {
  // Display the distance moved from the drag origin.
  console.log("x distance:", event.detail.x, "y distance:", event.detail.y);
});

arcgisViewDrag

Event

arcgisViewDrag: CustomEvent<DragEvent>

Fires during a pointer drag on the view.

arcgisViewHold

Event

arcgisViewHold: CustomEvent<HoldEvent>

Fires after holding either a mouse button or a single finger on the view for a short amount of time.

arcgisViewImmediateClick

Event

arcgisViewImmediateClick: CustomEvent<ImmediateClickEvent>

Fires right after a user clicks on the view.

arcgisViewImmediateDoubleClick

Event

arcgisViewImmediateDoubleClick: CustomEvent<ImmediateDoubleClickEvent>

Is emitted after two consecutive immediate-click events.

arcgisViewKeyDown

Event

arcgisViewKeyDown: CustomEvent<KeyDownEvent>

Fires after a keyboard key is pressed.

arcgisViewKeyUp

Event

arcgisViewKeyUp: CustomEvent<KeyUpEvent>

Fires after a keyboard key is released.

arcgisViewLayerviewCreate

Event

arcgisViewLayerviewCreate: CustomEvent<LayerViewCreateEvent>

Fires after each layer in the map has a corresponding LayerView created and rendered in the view.

arcgisViewLayerviewCreateError

Event

arcgisViewLayerviewCreateError: CustomEvent<LayerViewCreateErrorEvent>

Fires when an error emits during the creation of a LayerView after a layer has been added to the map.

arcgisViewLayerviewDestroy

Event

arcgisViewLayerviewDestroy: CustomEvent<LayerViewDestroyEvent>

Fires after a LayerView is destroyed and is no longer rendered in the view.

arcgisViewMouseWheel

Event

arcgisViewMouseWheel: CustomEvent<ViewMouseWheelEvent>

Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view.

arcgisViewPointerDown

Event

arcgisViewPointerDown: CustomEvent<PointerDownEvent>

Fires after a mouse button is pressed, or a finger touches the display.

arcgisViewPointerEnter

Event

arcgisViewPointerEnter: CustomEvent<PointerEnterEvent>

Fires after a mouse cursor enters the view, or a display touch begins.

arcgisViewPointerLeave

Event

arcgisViewPointerLeave: CustomEvent<PointerLeaveEvent>

Fires after a mouse cursor leaves the view, or a display touch ends.

arcgisViewPointerMove

Event

arcgisViewPointerMove: CustomEvent<PointerMoveEvent>

Fires after the mouse or a finger on the display moves.

arcgisViewPointerUp

Event

arcgisViewPointerUp: CustomEvent<PointerUpEvent>

Fires after a mouse button is released, or a display touch ends.

arcgisViewReadyChange

Event

arcgisViewReadyChange: CustomEvent<void>

This event is for the ready property and will be emitted when the view is ready. This event will also emit if the map property is changed.

arcgisViewReadyError

Event

arcgisViewReadyError: CustomEvent<void>

Since: ArcGIS Maps SDK for JavaScript 4.34

Fires if the view encounters a content or rendering error.

Example

viewElement.addEventListener("arcgisViewReadyError", () => {
  // handle error
});

arcgisViewVerticalTwoFingerDrag

Event

arcgisViewVerticalTwoFingerDrag: CustomEvent<VerticalTwoFingerDragEvent>

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires while the two pointers are dragged vertically on the view.

viewElement.addEventListener("arcgisViewVerticalTwoFingerDrag", (event) => {
  // Display the distance moved vertically from the drag origin.
  console.log("y distance:", event.detail.y);
});

Slots

Name	Description
`default (unnamed)`	Default slot for adding components to the scene. User is responsible for positioning the content via CSS.
`top-left`	Slot for components positioned in the top-left corner.
`top-right`	Slot for components positioned in the top-right corner.
`bottom-left`	Slot for components positioned in the bottom-left corner.
`bottom-right`	Slot for components positioned in the bottom-right corner.
`top-start`	Slot for components positioned at the top-start (top-left in LTR, top-right in RTL).
`top-end`	Slot for components positioned at the top-end (top-right in LTR, top-left in RTL).
`bottom-start`	Slot for components positioned at the bottom-start (bottom-left in LTR, bottom-right in RTL).
`bottom-end`	Slot for components positioned at the bottom-end (bottom-right in LTR, bottom-left in RTL).
`popup`	Slot for the arcgis-popup component to open automatically on click. Only the Popup component can be placed in this slot.

Styles

Name	Default	Description
`--arcgis-layout-overlay-space-top`		Since 4.34 Specifies the top padding for the layout.
`--arcgis-layout-overlay-space-bottom`		Since 4.34 Specifies the bottom padding for the layout.
`--arcgis-layout-overlay-space-left`		Since 4.34 Specifies the left padding for the layout.
`--arcgis-layout-overlay-space-right`		Since 4.34 Specifies the right padding for the layout.
`--arcgis-view-color-focus`		Since 5.0 Specifies the focus outline color for the view.