SceneView

Since

ArcGIS Maps SDK for JavaScript 4.11

Contains the collection of active views on the page. Only views that are ready appear in the collection.

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

Since

ArcGIS Maps SDK for JavaScript 4.8

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.

A collection of analyses associated with the view.

Represents an ongoing view animation initialized by goTo(). You may watch this property to be notified of animation state changes.

See also

• goTo()

• View2D.goTo()

Since

ArcGIS Maps SDK for JavaScript 4.34

Indicates whether animations are enabled 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, MapView.goTo()). Setting this property to false disables all animations in the view.

Since

ArcGIS Maps SDK for JavaScript 4.34

The ARIA attributes for the view container.

See also

• Element: ariaDescribedByElements property

• Element: ariaLabelledByElements property

• ARIA: aria-description attribute

• ARIA: aria-label attribute

Since

ArcGIS Maps SDK for JavaScript 5.0

The height of the attribution in pixels. The value is practical to adjust the bottom padding of other UI elements. The value changes when the attribution is expanded or collapsed.

Since

ArcGIS Maps SDK for JavaScript 5.0

The array of attribution items to be displayed in the view's attribution. This property is populated once the view has finished updating. Items are ordered based on descending score with higher scored items appearing first in the attribution.

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.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the attribution is visible in the view.

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

A convenience property used for defining the breakpoints on the height and width of the view. The sizes specified here determine the values of the widthBreakpoint and heightBreakpoint properties depending on the view's size.

Setting up breakpoints can aid in responsive app design. It does this by watching width and height breakpoints. This is helpful as it removes the need for multiple @media calls. Instead of listening for the view's size and/or resizes property, you can set up a watch handler for either the widthBreakpoint or heightBreakpoint properties of the view.

See also

• Sample: Responsive apps using CSS

• MDN Web docs: Media Queries

The observation point from which the visible portion (or perspective) of the SceneView is determined. Contains properties including the elevation, tilt, and heading (in degrees) of the current view. Setting the camera immediately changes the current view. For animating the view, see goTo().

When set in the constructor, this property overrides the viewpoint, extent, center, scale, and zoom properties.

The camera property contains an internal reference which may be modified in the future. To persist or modify the camera, create a clone using Camera.clone().

See also

• goTo()

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates if the view can zoom in.

Since

ArcGIS Maps SDK for JavaScript 5.0

Indicates if the view can zoom out.

Represents the view's center point; when setting the center you may pass a Point instance or an array of numbers representing a longitude/latitude pair ([-100.4593, 36.9014]). Setting the center immediately changes the current view. For animating the view, see goTo().

If set in the constructor, this property will be ignored if the viewpoint, camera, or extent properties are also set in the constructor.

The center property contains an internal reference which may be modified in the future. To persist or modify the center, create a clone using center.clone().

See also

• goTo()

Represents an optional clipping area used to define the visible Extent of a local scene. The clipping area cannot have z-values.

If defined, only features that intersect the area will be displayed. The clipping area applies to all layer types, including the ground and the basemap. The clipping area will not increase the area beyond the union of the extents of all layers, including the ground and the basemap. To do so, add a GraphicsLayer with a custom fullExtent to the scene.

The clippingArea property only applies to local scenes.

The clippingArea property contains an internal reference which may be modified in the future. To persist or modify the clippingArea, create a clone using clippingArea.clone().

See also

• viewingMode

• Sample - Create a local scene

Specifies constraints for Camera tilt and altitude that may be applied to the SceneView. See the object specification table below for details.

See also

• Sample - Custom background for SceneView (altitude)

The id or node representing the DOM element containing the view. This is typically set in the view's constructor.

Since

ArcGIS Maps SDK for JavaScript 4.7

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

Since

ArcGIS Maps SDK for JavaScript 4.32

Indicates whether displayFilters are honored across all layers in the view. If false, display filters are ignored on all layers and all features are rendered. To ignore display filters on a per-layer basis, set the layer's displayFilterEnabled property to false.

Specifies various properties of the environment's visualization in the view. The SceneView will redraw automatically when any property of the environment changes.

Modifying the lighting:

let view = new SceneView({
  map: map,
  container: "viewDiv"
});

// Set the light source position to reflect the current sun position at that time
view.environment.lighting = {
  type: "sun",
  date: new Date("January 1, 2022 12:00:00 UTC")
};

// Change the lighting to virtual, so that everything in the scene is nicely lit:
view.environment.lighting = {
  type: "virtual"
};

// Enable displaying shadows cast by the light source
view.environment.lighting.directShadowsEnabled = true;

Setting the background:

// Set a background color
let view = new SceneView({
  container: "viewDiv",
  map: map,
  environment: {
    background: {
      type: "color",
      color: [255, 252, 244, 1]
    },
    starsEnabled: false,
    atmosphereEnabled: false
  }
});

Changing the weather in the scene:

let view = new SceneView({
  container: "viewDiv",

  map: new Map({
    basemap: "satellite",
    ground: "world-elevation"
  }),
  environment: {
    weather: {
      type: "cloudy"   // autocasts as new CloudyWeather()
    }
  }
});

The extent represents the visible portion of a Map within the view as an instance of an Extent. Setting the extent immediately changes the view without animation. To animate the view, see goTo().

Rather than using extent to change the visible portion of the Map in a SceneView, you should use camera since it easily allows you to define the heading, elevation and tilt of the observation point from which the view's perspective is created.

When set in the constructor, this property overrides the center, scale, and zoom properties. This property will be ignored if the viewpoint or camera are also set in the constructor.

The extent property contains an internal reference which may be modified in the future. To persist or modify the extent, create a clone using Extent.clone().

See also

• camera

• goTo()

Since

ArcGIS Maps SDK for JavaScript 4.12

A fatal Error returned when the view loses its WebGL context. watch() this property to properly handle the error and attempt to recover the WebGL context.

See also

• tryFatalErrorRecovery()

Since

ArcGIS Maps SDK for JavaScript 4.19

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

Since

ArcGIS Maps SDK for JavaScript 4.7

Indicates if the browser focus is on the view.

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

See also

• Graphic

• GraphicsLayer

• Intro to graphics

Since

ArcGIS Maps SDK for JavaScript 4.7

The view for the ground of the map.

The height of the view in pixels read from the view container element.

The view container needs to have a height greater than 0 to be displayed.

A convenience property indicating the general size of the view's height. This value is determined based on where the view's height falls in the ranges defined in the breakpoints property. See the table below for a list of possible values. Use the breakpoints property to override the default thresholds.

See also

• Sample: Responsive apps using CSS

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:

See also

• Sample: Highlight features by geometry

• Sample: Highlight SceneLayer

Since

ArcGIS Maps SDK for JavaScript 4.9

Options to configure input handling of the View.

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

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

See also

• LayerView

Since

ArcGIS Maps SDK for JavaScript 4.19

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. A view may only display one map at a time. On the other hand, one Map may be viewed by multiple MapViews and/or SceneViews simultaneously.

This property is typically set in the constructor of the MapView or SceneView. See the class description for examples demonstrating the relationship between the map and the view.

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

Since

ArcGIS Maps SDK for JavaScript 4.9

Options to configure the navigation behavior of the View.

A convenience property indicating the view's orientation. See the table below for a list of possible values.

Use the padding property to make the center, and extent, etc. work off a subsection of the full view. This is particularly useful when layering UI elements or semi-transparent content on top of portions of the view.

Since

ArcGIS Maps SDK for JavaScript 4.15

This property contains performance information in a SceneView like global memory usage and additional details for layers about memory consumption and number of features.

See also

• Sample - SceneView memory resources

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

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

• popupEnabled

• openPopup()

• Loading the Popup

Since

ArcGIS Maps SDK for JavaScript 4.27

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

When true, a Popup instance is created and assigned to popup the first time the user clicks on the view, unless popup is null. The popup then processes the click event.

When false, the click event is ignored and popup is not created for features but will open for other scenarios that use a popup, such as displaying Search results.

See also

• popup

• openPopup()

SceneView can draw scenes in three different quality modes: high, medium and low.

The quality profiles have increasingly higher settings for the memory limit and rendering quality.

The memory limit defines the maximum amount of memory which the view is allowed to use. Complex web scenes with many layers will hit the memory limit. When this happens, the view will reduce the level of detail and the number of features that are loaded, as well as the rendering resolution of the view and of draped content. This will make the application less likely crash due to out of memory errors.

The rendering quality settings impacts the level of detail and the maximum number of features that are loaded by all layers. A higher quality profile also enables more rendering features, providing better visuals. Furthermor, it increases the resolution of shadows, rasterized content such as icons and text, as well as the overall rendering resolution on HiDPI displays.

A higher quality profile improves visual quality and detail, but can have a negative impact on drawing performance and stability.

SceneView performance depends on the amount of data being displayed, the quality profile and the device type. performanceInfo can be used to inspect the memory consumption and the number of features that are displayed for a specific scene. The SceneView memory resources sample shows how this property can be used.

The default value is based on the detected browser:

• low for all browsers on iPhones
• medium for any other browser and device

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

• The view has a map. If map is a WebMap or a WebScene, then the map or scene must be loaded.
• The view has a container with a size greater than 0.
• The view has a spatialReference, a center, and a scale. These also can be inferred by setting an extent.

When a view becomes ready it will resolve itself and invoke the callback defined in when() where code can execute on a working view. Subsequent changes to a view's readiness would typically be handled by watching view.ready and providing logic for cases where the map or container change.

See also

• when()

Since

ArcGIS Maps SDK for JavaScript 4.32

Provides more granular information about the view's process of becoming ready. This property helps manage view properties when the view fails to become ready, such as when the basemap fails to load.

The following are the possible expected values and their descriptions:

Indicates whether the view is being resized.

Since

ArcGIS Maps SDK for JavaScript 4.9

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

Represents an approximation of the map scale. Setting the scale immediately changes the current view. For animating the view, see goTo().

When set in the constructor, this property overrides the zoom property. This property will be ignored if the viewpoint, camera, or extent properties are also set in the constructor.

See also

• goTo()

Since

ArcGIS Maps SDK for JavaScript 5.0

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

An array containing the width and height of the view in pixels, e.g. [width, height].

The spatial reference of the view.

This indicates the projected or geographic coordinate system used to locate geographic features in the map. In a SceneView 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:
  • map.basemap.baseLayer
  • Map.layers
  • map.ground.layers

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.

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

Indicates if the view is visible on the page. When true, the view is not visible and it stops rendering and updating data. Set to true when one of the following conditions are met:

• if the view does not have a container,
• if the view's height or width equal to 0,
• if the view container's css style display is set to none (display:none).

When the view container's css style visibility is set to hidden, this property is set to false, and the view is hidden but it stills renders and updates data.

Since

ArcGIS Maps SDK for JavaScript 4.28

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

See also

• Theme

• Sample - Color theming for interactive tools

The tiling scheme information of the view.

Since

ArcGIS Maps SDK for JavaScript 4.12

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.

The type of the view.

Exposes the default widgets available in the view and allows you to toggle them on and off. See DefaultUI for more details.

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

The viewing mode (local or global). Global scenes render the earth as a sphere. Local scenes render the earth on a flat plane and allow for navigation and feature display in a localized or clipped area. Users may also navigate the camera of a local scene below the surface of a basemap.

Value	Example	Description
global		Global scenes allow the entire globe to render in the view, showing the curvature of the earth.
local		Local scenes render the earth on a flat surface. They can be constrained to only show a "local" area by setting the clippingArea property. Local scenes also allow for displaying and exploring data that would otherwise be hidden by the surface of the earth.

Depending on the viewing mode different supported coordinate systems are available.

See also

• clippingArea

• Sample - Create a local scene

Represents the current view as a Viewpoint or point of observation on the view. In SceneViews, camera should be used in favor of viewpoint for watching or changing the point of view. Setting the viewpoint immediately changes the current view. For animating the view, see goTo().

When set in the constructor, this property overrides the extent, center, scale, and zoom properties. This property will be ignored if camera is also set in the constructor.

The viewpoint property contains an internal reference which may be modified in the future. To persist or modify the viewpoint, create a clone using Viewpoint.clone().

See also

• goTo()

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. The polygon is a 2D approximation of the 3D frustum projected onto the ground surface. This can give more precise results than the view extent, although it is still only an approximation of the 3D visible volume. An example use of the visible area is to spatially filter visible features in a layer view query.

This property does not consider occlusions caused by terrain features (e.g. hills, mountains) or 3D structures (e.g. buildings). Consequently, the visible area may include areas that are actually hidden from the user's view.

The visible area may contain multiple rings, for example the view intersects with the international date line or the poles.

See also

• Sample: SceneView - visibleArea

• extent

The width of the view in pixels read from the view container element.

The view container needs to have a width greater than 0 to be displayed.

A convenience property indicating the general size of the view's width. This value is determined based on where the view's width falls in the ranges defined in the breakpoints property. See the table below for a list of possible values. Use the breakpoints property to override the default thresholds.

See also

• Sample: Responsive apps using CSS

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 goTo().

Setting this property in conjunction with center is a convenient way to set the initial extent of the view.

If set in the constructor, this property will be ignored if the viewpoint, camera, extent, or scale properties are also set in the constructor.

See also

• goTo()

Since

ArcGIS Maps SDK for JavaScript 4.27

Closes the popup.

See also

• popup

• openPopup()

Since

ArcGIS Maps SDK for JavaScript 4.17

Destroys the view, and any associated resources, including its map, popup, and ui elements. These can no longer be used once the view has been destroyed. To prevent these components from being destroyed, remove them from the view before calling destroy().

// remove popup and legend from the view so that they are not destroyed
const popup = view.popup;
view.popup = null;
view.ui.remove(legend);

// unset map from the view so that it is not destroyed
const map = view.map;
view.map = null;

// destroy the view and any remaining associated resources
view.destroy();

See also

• Map.destroy()

• WebMap.destroy()

• WebScene.destroy()

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.

Since

ArcGIS Maps SDK for JavaScript 4.5

Sets the focus on the view.

Sets the view to a given target. The target parameter can be one of the following:

• [longitude, latitude] pair of coordinates
• Geometry (or array of Geometry[])
• Graphic (or array of Graphic[])
• Viewpoint
• Camera
• Object with a combination of target, center, scale, position, heading and tilt properties (with target being any of the types listed above). The center property is provided as a convenience to animate the center and is the equivalent of specifying the target with the center Point. The target must be provided in the spatial reference of the view.

This function returns a promise which resolves as soon as the new view has been set to the target. If the transition is animated, then the ongoing animation can be obtained using animation. If setting the view to the new target fails, the promise returned by the goTo() method rejects with an error. Use a catch statement, to handle the error:

view.goTo({
  center: [-126, 49]
})
.catch(function(error) {
  if (error.name != "AbortError") {
     console.error(error);
  }
});

If the given target is far away from the current camera position, then heading and tilt will be automatically set to their neutral values (facing north, looking top down). Tilt and heading can always be explicitly set to override this behavior.

See also

• Sample - SceneView goTo()