Scene

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

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

Attribute

alpha-compositing-enabled

Default value

false

A collection of analyses associated with the view.

Read more...

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.

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

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.

Read more

Attribute

basemap

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

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.

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.

Read more

Attribute

camera-fov

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.

Read more

Attribute

camera-heading

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.

Read more

Attribute

camera-position

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.

Read more

Attribute

camera-tilt

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.

Read more

Attribute

center

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

Read more

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

Read more

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

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:

1
2
3
4
5
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:

1
2
3
4
5
6
7
8
viewElement.environment = {
 background: {
    type: "color",
    color: [255, 252, 244, 1]
 },
  starsEnabled: false,
  atmosphereEnabled: false
};

Changing the weather in the scene:

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

See also

• SunLighting
• VirtualLighting
• SunnyWeather
• CloudyWeather
• RainyWeather
• SnowyWeather
• FoggyWeather
• Sample - Daylight component
• Sample - Weather component

Read more

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.

Read more

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

Read more

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.

A container of all focus areas present in the map.

Read more...

Gamepad input specific configuration settings.

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

Example

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

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"

Read more

Attribute

ground

The view for the ground of the map.

Read more...

Use the highlights property instead.

Options for configuring the highlight.

Represents a collection of HighlightOptions objects which can be used to highlight features throughout an application.

Read more...

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

Default value

false

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

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

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.

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

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

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

Default value

false

Options to configure the navigation behavior of the view.

Read more

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

Read more

Default value

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

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.

A Popup object that displays general content or attributes from layers in the map.

Read more

Controls whether the popup opens automatically when users click on the view.

Attribute

popup-disabled

Default value

false

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

Read more

Attribute

quality-profile

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

Read more

Default value

false

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.

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.

Read more

Attribute

scale

The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map.

Read more

Default value

null

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

Default value

false

Indicates if the view is visible on the page.

Read more

Attribute

suspended

Default value

true

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.

Default value

null

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.

Default value

null

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

Default value

false

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

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.

Read more

Attribute

viewing-mode

Default value

"global"

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.

Read more

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

Read more

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.

Read more

Attribute

zoom

Adds a layer to the map's layers collection.

Parameters

Returns

Promise<void>

Adds a layer or array of layers to the map's layers collection.

Parameters

Returns

Promise<void>

Adds a table to the map's tables collection.

Parameters

Returns

Promise<void>

Adds a table or array of tables to the map's tables collection.

Parameters

Returns

Promise<void>

Closes the popup.

Returns

Promise<void>

Create a promise that resolves once component is fully loaded.

Example

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

Returns

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>

Sets the view to a given target.

Read more

Parameters

Returns

Promise<unknown>

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

1
2
3
4
5
6
7
8
9
10
11
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");
     }
  });
});

Read more

Parameters

Returns

Promise<SceneViewHitTestResult>

Opens the popup based on input options.

Read more

Parameters

Returns

Promise<void>

Creates a screenshot of the current view.

Read more

Parameters

Returns

Promise<SceneViewScreenshot>

Converts the given screen point to a map point.

Parameters

Returns

Point | null | undefined

Converts the given map point to a screen point.

Parameters

Returns

SceneViewScreenPoint

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

Returns

Promise<void>

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

Example

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

Parameters

Returns

Promise<void>

Gets the analysis view created for the given analysis object.

Read more

Parameters

Returns

Promise<AreaMeasurementAnalysisView3D | DimensionAnalysisView3D | DirectLineMeasurementAnalysisView3D | ElevationProfileAnalysisView3D | LineOfSightAnalysisView3D | SliceAnalysisView3D | ViewshedAnalysisView3D | VolumeMeasurementAnalysisView3D>

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

Read more

Parameters

Returns

Promise<LayerView>

Fires when a ArcgisScene fails to load or if one of its dependencies fails to load (e.g., basemap, ground, layers).

See also

• loadErrorSources

Example

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

Fires when the view for an analysis is created.

Read more

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

Read more

Fires after an analysis view is destroyed.

Read more

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

Fires after a user clicks on the view.

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

Read more

Fires after double-clicking on the view.

Read more

Fires during a pointer drag on the view.

Read more

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

Read more

Fires right after a user clicks on the view.

Read more

Is emitted after two consecutive immediate-click events.

Read more

Fires after a keyboard key is pressed.

Read more

Fires after a keyboard key is released.

Read more

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

Read more

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

Read more

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

Read more

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

Read more

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

Read more

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

Read more

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

Read more

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

Read more

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

Read more

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.

Fires if the view encounters a content or rendering error.

Example

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

Default slot for adding components to the scene. User is responsible for positioning the content via CSS.

Slot for components positioned in the top-left corner.

Slot for components positioned in the top-right corner.

Slot for components positioned in the bottom-left corner.

Slot for components positioned in the bottom-right corner.

Slot for components positioned at the top-start (top-left in LTR, top-right in RTL).

Slot for components positioned at the top-end (top-right in LTR, top-left in RTL).

Slot for components positioned at the bottom-start (bottom-left in LTR, bottom-right in RTL).

Slot for components positioned at the bottom-end (bottom-right in LTR, bottom-left in RTL).

Slot for the Popup component to open automatically on click. When using this slot, the popup-disabled attribute must be set to true. Only the Popup component can be placed in this slot.