SceneView

require(["esri/views/SceneView"], function(SceneView) { /* code goes here */ });
Class: esri/views/SceneView
Inheritance: SceneView View Accessor
Since: ArcGIS API for JavaScript 4.0

Overview

A SceneView displays a 3D view of a Map or WebScene instance using WebGL. To render a map and its layers in 2D, see the documentation for MapView. For a general overview of views, see View.

Various scenes

For a map to be visible to the user in the DOM, a SceneView must have both a valid Map instance and a DOM element with a non-zero height and width in which to render. Note that there must be valid data in the map, such as operational layers or a basemap with base layers, before the view will begin rendering the map.

// Create a basic SceneView instance with a basemap and world elevation
const view = new SceneView({
  // An instance of Map or WebScene
  map: new Map({
    basemap: "hybrid"
  }),

  // The id of a DOM element (may also be an actual DOM element)
  container: "viewDiv"
});

Using the view

A SceneView may not be immediately ready for display after it has been constructed. For example, map data may need to be loaded first to determine the spatialReference of the view, or the DOM container may not yet have a non-zero size. Many of the view methods (such as hitTest or goTo) need the view to be ready before they can be used.

// create a SceneView instance (for 3D viewing)
const view = new SceneView({
  map: new Map({
    basemap: "topo-vector"
  }),
  container: "viewDiv"
});

view.when(function() {
  // SceneView is now ready for display and can be used. Here we will
  // use goTo to view a particular location at a given zoom level, camera
  // heading and tilt.
  view.goTo({
    center: [-112, 38],
    zoom: 13,
    heading: 30,
    tilt: 60
  })
})
.catch(function(err) {
  // A rejected view indicates a fatal error making it unable to display,
  // this usually means that WebGL is not available, or too old.
  console.error("SceneView rejected:", err);
});

For live examples of view.when(), see the 2D overview map in SceneView and Toggle elevation layer samples.

SceneView navigation

The view can be navigated programmatically via goTo() and the view properties or interactively with mouse, keyboard or touch inputs. SceneView navigation is enabled by defaults, and includes the mouse, keyboard and touch interactions as described in the table below. Touch interactions are working on any touch enabled monitor or laptop screen.

Action SceneView behavior
Drag Pan
Double-click Zoom in at the cursor
Scroll forward Zoom in at the cursor
Scroll backward Zoom out at the center of the view
Right-click+Drag 3D-rotate around the center of the view
Arrow Keys Nudge the view left, right, up, or down (only supported in global scene)
B + Left-click+Drag 3D-rotate around the camera's position
P Move the camera to look perpendicular to the data displayed in the view
N Adjust the SceneView to point north
W Tilt camera up
A Rotate camera counterclockwise
S Tilt camera down
D Rotate camera clockwise
J Move down, closer to the view (only supported in global scene)
U Move up, higher from the view (only supported in global scene)
Drag with one or multiple fingers Pan
Double-tap with one finger Zoom in at the finger position
Two finger pinch in/out Zoom out/in
Move two fingers in clockwise or counterclockwise direction Rotate
Drag two fingers up or down the screen Tilt the scene

To disable SceneView navigation, you must call the stopPropagation() method on the event objects of the pointer or gesture events that trigger the navigation.

See our samples on disabling view navigation for examples.

SceneView navigation with Gamepad and 3DConnexion devices

Gamepad and 3Dconnexion devices, like the SpaceMouse, can be used for navigation when view.navigation.gamepad.enabled is set to true(default). Please see GamepadInputDevice for supported devices.

Gamepad

Gamepad Action SceneView behavior
Left Trigger Descend
Right Trigger Ascend
Left Stick Pan
Right Stick 3D-rotate around the center of the view
Action Image SpaceMouse Action SceneView behavior
3DMousePan Push (left/right/forward/backward) Pan
3DMousePan Pull up Ascend
3DMousePan Push down Descend
3DMousePan Rotate clockwise Rotate the view clockwise
3DMousePan Rotate counterclockwise Rotate the view counterclockwise
3DMousePan Tilt Tilt the scene

To disable gamepad navigation, you can set view.navigation.gamepad.enabled to false.

Note:

  • Per W3C Working Draft 29 October 2020, gamepad functionality may not be available on some or all browsers if the web application is hosted on a non-secure context (e.g. http rather than https). Future versions of the ArcGIS API for JavaScript may explicitly disable gamepad capabilities on non-secure contexts.

Programmatic navigation

Traditional 2D mapping properties, such as scale, zoom, center and extent do not always work well in 3D. For example, a map's scale is not clear when viewed in the context of a globe. The SceneView therefore supports these properties on a best effort basis, with certain limitations (see the documentation of individual properties for more information).

// Compatibility with 2D viewing properties, such as center and zoom, allows
// convenient transitioning from the familiar use of the 2D MapView to the
// use of the SceneView for 3D viewing.
let view = new SceneView({
  map: new Map({
    basemap: "satellite"
  }),

  container: "viewDiv",

  // Sets the center point of the view at a specified lon/lat
  center: [-112, 38],

  // Sets the zoom LOD to 13
  zoom: 13
});

The nature of 3D viewing includes oblique views, z-values, and rotation, all of which add complexity to defining what is visible in the view. In contrast to 2D MapView, which are primarily defined by an extent, or center and scale, the primary view specification of the SceneView is a Camera instance. The camera is defined by a 3D position, heading and tilt. See the documentation of Camera for more details.

Because some view properties overlap (e.g. center and camera), there is a set priority in which these properties are applied during construction of the view (until the view becomes ready). The following table describes which properties have priority during view construction (properties that are overridden will have no effect during construction).

Property Overrides
camera viewpoint, extent, center, scale, zoom
viewpoint extent, center, scale, zoom
extent center, scale, zoom
scale zoom

It can be difficult to define the camera for viewing data at a particular location. The goTo method provides a convenient way to set the view's camera based on data (geometries, graphics) you want to view and from any perspective using heading, tilt, scale or zoom. Additionally, goTo will provide a smooth transition to the new location of the view by default.

// go to a location specified in geographic coordinates,
// from a 45 degree angle.
view.goTo({
  center: [-112, 38],
  heading: 45
});

// go to view all the graphics in view.graphics, while northing the
// the camera and tilting it to 60 degrees
view.goTo({
  target: view.graphics,
  heading: 0,
  tilt: 60
});

// Set the view to show an extent at a -20 degree heading, disabling the
// animated transition
view.goTo({
  target: new Extent(694942, 5596444, 1284090, 6163926, SpatialReference.WebMercator),
  heading: -20
}, {
  animate: false
});

Viewing modes

global vs local

The SceneView supports two different viewing modes, global (left picture above) and local (right picture above), specified by the viewingMode property. Global scenes render the earth as a globe, while local scenes render the surface on a flat plane. Local mode allows for navigation and feature display in a localized or clipped area. In both viewing modes the users may navigate the camera below the ground surface by setting the esri/Ground#navigationConstraint#type to none.

The viewing mode (if not explicitly set by the user) is determined based on the spatial reference of the view. If the spatial reference is either Web Mercator or WGS84, then the viewingMode will default to global. For any other spatial reference the viewingMode will default to local.

Supported coordinate systems

The SceneView supports following coordinate systems in a global scene:

In a local scene the following coordinate systems are supported:

  • Any Projected Coordinate System
  • Noncached layers with any spatial reference since they will be reprojected to the scene spatial reference

Using elevation data

The SceneView will use elevation layers from the Map.ground as sources for elevation when rendering the ground surface. Similar to the basemap, the ground can be initialized with a well-known name, which creates it with a known set of elevation layers.

let view = new SceneView({
  map: new Map({
    basemap: "satellite",

    // A ground preset containing a single elevation layer, sourced from
    // https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer
    ground: "world-elevation"
  },

  container: "viewDiv"
});

Local elevation layers can be added to the ground.layers to merge multiple elevation sources into a single surface. See 3D Map With Elevation Services for an example.

Handling events

When users interact with the SceneView, their actions trigger events that you can listen and respond to. For example, you can listen when a user moves the mouse over the map and display the coordinates at the mouse location. This is called a pointer-move event. See the SceneView events section for a list of all the events.

It is important to note that some events are dependent on each other and the timing of the user interaction can influence the type of event that gets triggered. For example, a single click triggers a series of events: pointer-down when the user presses the mouse button, pointer-up when they release the mouse button. An immediate-click event gets triggered right after the pointer-up event. immediate-click should be used for responding to user interaction without delay. The click event is only triggered after making sure that the user doesn't click a second time (in which case it would trigger a double-click event).

Various events

In the case of a double-click, the same event chain is repeated after the first click. However, if the user clicks a second time within a close time range, then the click event is not emited anymore, but the pointer-down, pointer-up and immediate-click events are triggered again. After two immediate-click events, a double-click event gets triggered along with an immediate-double-click event. The difference between the two is that an immediate-double-click cannot be prevented by the use of stopPropagation on the immediate-click event and can therefore be used to react to double-clicking independently of usage of the immediate-click event.

These events are also used internally for navigation, popups or different interactive tools like measurement or sketch. In some use cases, adding additional event listeners might interfere with the default event listeners. For example, adding an immediate-click event to open up a popup, will interfere with the default click event that also opens up a popup.

See the Event explorer sample, to visualize the different events that get triggered when you interact with the view.


Known Limitations

  • The number of features that can be rendered in a SceneView varies depending on the qualityProfile of the view and the complexity of each feature's geometry and symbol. Layers with a large number of features are dynamically loaded and displayed as you navigate the scene. For optimal performance, the number of displayed features is adjusted based on the complexity of the symbol and device capability. As a result, some features may not be visible in the view.

  • SceneView does not support rendering of Multipoint geometry.

See also:

Constructors

new SceneView(properties)
Parameter:
properties Object
optional

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

Example:
// Typical usage
let view = new SceneView({
  // ID of DOM element containing the view
  container: "viewDiv",
  // Map/WebScene object
  map: new Map()
});

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
Show inherited properties Hide inherited properties
Name Type Summary Class
Collection<LayerView>

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

more details
more detailsView
Boolean

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

more details
more detailsSceneView
ViewAnimation

Represents an ongoing view animation initialized by goTo().

more details
more detailsView
BasemapView

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

more details
more detailsView
Object

A convenience property used for defining the breakpoints on the height and width of the view.

more details
more detailsSceneView
Camera

The observation point from which the visible portion (or perspective) of the SceneView is determined.

more details
more detailsSceneView
Point

Represents the view's center point; when setting the center you may pass a Point instance or an array of numbers representing at longitude/latitude pair ([-100.4593, 36.9014]).

more details
more detailsSceneView
Extent

Represents an optional clipping area used to define the visible extent of a local scene.

more details
more detailsSceneView
Accessor

Specifies constraints for Camera tilt and altitude that may be applied to the SceneView.

more details
more detailsSceneView
HTMLDivElement

The id or node representing the DOM element containing the view.

more details
more detailsView
String

The name of the class.

more details
more detailsAccessor
Accessor

Specifies various properties of the environment's visualization in the view.

more details
more detailsSceneView
Extent

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

more details
more detailsSceneView
Error

A fatal error returned when the view loses its WebGL context.

more details
more detailsView
Collection<string>

Applies a display filter on the view for a specific set of floor levels.

more details
more detailsSceneView
Boolean

Indicates if the browser focus is on the view.

more details
more detailsView
Collection<Graphic>

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

more details
more detailsView
GroundView

The view for the ground of the map.

more details
more detailsSceneView
Number

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

more details
more detailsView
String

A convenience property indicating the general size of the view's height.

more details
more detailsSceneView
Object

Options for configuring the highlight.

more details
more detailsSceneView
Input

Options to configure input handling of the View.

more details
more detailsView
Boolean

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

more details
more detailsView
Collection<LayerView>

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

more details
more detailsView
Magnifier

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

more details
more detailsView
Map

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

more details
more detailsView
Boolean

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

more details
more detailsView
Navigation

Options to configure the navigation behavior of the View.

more details
more detailsView
String

A convenience property indicating the view's orientation.

more details
more detailsSceneView
Object

Use the padding property to make the center, and extent, etc.

more details
more detailsView
SceneViewPerformanceInfo

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

more details
more detailsSceneView
Popup

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

more details
more detailsView
String

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

more details
more detailsSceneView
Boolean

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

more details
more detailsView
Boolean

Indicates if the view is being resized.

more details
more detailsView
Number

Represents the current value of one pixel in the unit of the view's spatialReference.

more details
more detailsView
Number

Represents an approximation of the map scale at the center of the view.

more details
more detailsSceneView
Number[]

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

more details
more detailsView
SpatialReference

The spatial reference of the view.

more details
more detailsView
Boolean

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

more details
more detailsView
Boolean

Indicates if the view is visible on the page.

more details
more detailsView
TimeExtent

The view's time extent.

more details
more detailsView
String

The type of the view.

more details
more detailsSceneView
DefaultUI

Exposes the default widgets available in the view and allows you to toggle them on and off.

more details
more detailsView
Boolean

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

more details
more detailsView
String

The viewing mode (local or global).

more details
more detailsSceneView
Viewpoint

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

more details
more detailsSceneView
Number

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

more details
more detailsView
String

A convenience property indicating the general size of the view's width.

more details
more detailsSceneView
Number

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

more details
more detailsSceneView

Property Details

allLayerViews Collection<LayerView> inherited

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

See also:
alphaCompositingEnabled Boolean
Since: ArcGIS API 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's important to set this property to true only when you need to apply transparency on the view.

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
 }
})

Represents an ongoing view animation initialized by goTo(). You may watch this property to be notified when the view's extent changes .

See also:
basemapView BasemapView inherited

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

breakpoints Object

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.

Please refer to the styling guide for additional information on working with this.

Properties:
xsmall Number
optional
Default Value:544

Sets the xsmall breakpoint in pixels used by widthBreakpoint and heightBreakpoint. If the view's height or width is smaller than this value, then the value of widthBreakpoint or heightBreakpoint will be xsmall.

small Number
optional
Default Value:768

Sets the small breakpoint in pixels used by widthBreakpoint and heightBreakpoint. If the view's height or width is between this value and the value of the xsmall property, then the value of widthBreakpoint or heightBreakpoint will be small.

medium Number
optional
Default Value:992

Sets the medium breakpoint in pixels used by widthBreakpoint and heightBreakpoint. If the view's height or width is between this value and the value of the small property, then the value of widthBreakpoint or heightBreakpoint will be medium.

large Number
optional
Default Value:1200

Sets the large breakpoint in pixels used by widthBreakpoint and heightBreakpoint. If the view's height or width is between this value and the value of the medium property, then the value of widthBreakpoint or heightBreakpoint will be large.

xlarge Number
optional

Sets the xlarge breakpoint in pixels used by widthBreakpoint and heightBreakpoint. If the view's height or width is greater than the value of the large property, then the value of widthBreakpoint or heightBreakpoint will be xlarge.

See also:
Example:
// Instead of watching the size or resizing properties
view.watch(size)
view.watch(resizing)

// Set up a watch handle for breakpoint
view.watch("widthBreakpoint",function(breakpoint){
  switch (breakpoint) {
    case "xsmall":
    // do something
      break;
    case "small":
    case "medium":
    case "large":
    case "xlarge":
    // do something else
      break;
    default:
  }
});

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

Z-values defined in a geographic or metric coordinate system are expressed in meters. However, in local scenes that use a projected coordinate system, vertical units are assumed to be the same as the horizontal units specified by the service.

See also:
Examples:
// Initializes the view at the given (x, y, z) position with a heading of 95 degrees.
// The position of the camera is a Point which will autocast in the sample
// below. Note that the default Point spatial reference is WGS84 which
// will only work if the SceneView has a Web Mercator or WGS84 spatial
// reference. For other spatial references, create a new position Point
// with an explicit spatial reference.
const view = new SceneView({
  camera: {
    position: [
       -122, // lon
         38, // lat
      50000  // elevation in meters
    ],

    heading: 95
  }
});
// Initializes the view at the given position with a tilt of 65 degrees
const view = new SceneView({
  camera: {
    position: {
      x: -100, // lon
      y: 45,   // lat
      z: 10654 // elevation in meters
    },

    tilt: 65
  }
});
// Clone the camera to modify its properties
const camera = view.camera.clone();

// Set new values for heading and tilt
camera.heading = 180;
camera.tilt = 45;

// Set the new properties on the view's camera
view.camera = camera;
// Set the view's camera to a new position, heading and tilt with the goTo() method
view.goTo({
  target: [-122, 38, 50000],
  heading: 180,
  tilt: 45
});
center Pointautocast
Autocasts from Number[]|Object

Represents the view's center point; when setting the center you may pass a Point instance or an array of numbers representing at 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().

Z-values defined in a geographic or metric coordinate system are expressed in meters. However, in local scenes that use a projected coordinate system, vertical units are assumed to be the same as the horizontal units specified by the service.

See also:
Examples:
// Sets the initial center point of the view to long/lat coordinates
let view = new SceneView({
  center: [-112, 38]
});
// Updates the view's center point to a pre-determined Point object
view.center = new Point({
  x: 12804.24,
  y: -1894032.09,
  z: 12000,

  spatialReference: 2027
});
// view.center needs to be set (not modified in place) to have an effect.
// To modify only the center.x, first clone the current center, modify
// the .x property and then set it on the view.
let center = view.center.clone();

// Offset the center 1km to the east
center.x += 1000;

view.center = center;
clippingArea Extentautocast

Represents an optional clipping area used to define the visible extent of a local scene. If defined, only features that intersect the area will be displayed. The clipping area applies to all layers types, including the ground and the basemap.

The clippingArea property only applies to local scenes.

scene-clipping-area

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

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

Properties:
altitude Accessor
optional

Specifies a constraint on the minimum and maximum allowed camera altitude.

Known Limitations

The altitude constraint is only supported in scenes with global viewingMode.

Specification:
min Number
optional
Default Value:-∞

The minimum allowed camera altitude (in meters).

max Number
optional
Default Value:EARTH_RADIUS * 4

The maximum allowed camera altitude (in meters).

clipDistance Accessor
optional

Specifies the near and far webgl clip distances.

Specification:
near Number
optional

The near clip distance.

far Number
optional

The far clip distance.

mode String
optional
Default Value:auto

Specifies the mode of the constraint which is either auto or manual. In auto mode, the near and far clip distance values are automatically determined. In manual mode, the near and far clip distance values are user defined, constant values. Note that the mode automatically changes to manual whenever the near or far property is set.

Possible Values:"auto"|"manual"

tilt Accessor
optional

Specifies a constraint on the amount of allowed tilting of the view.

Specification:
max Number
optional

Specifies the maximum amount of tilt (in degrees) allowed in the view and may range from 0.5 to 179.5 degrees.

mode String
optional
Default Value:auto

Specifies the mode of the constraint. There are two possible values: auto or manual. In auto mode, the maximum tilt value is automatically determined based on the altitude of the view camera. In manual mode, the maximum tilt value is a user defined, constant value. Note: The mode automatically changes to manual whenever the max property is set.

Possible Values:"auto"|"manual"

See also:
Autocasts from String

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

Examples:
// Sets container to the DOM id
let view = new MapView({
  container: "viewDiv"  // ID of the HTML element that holds the view
});
// Sets container to the node
let viewNode = document.getElementById("viewDiv");
let view = new SceneView({
  container: viewNode
});
declaredClass Stringreadonly inherited
Since: ArcGIS API for JavaScript 4.7

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

environment Accessor

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

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

// Set the sun position to reflect the current time
view.environment.lighting.date = Date.now();

// Disable automatic lighting updates by camera tracking
view.environment.lighting.cameraTrackingEnabled = true;

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

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

Specifies how the background of the scene (which lies behind sky, stars and atmosphere) should be displayed. By default this is simply a single, fully opaque, black color. Currently ColorBackground is the only type of background supported.

lighting Accessor
optional

Lighting conditions of the scene.

Specification:
date Date
optional
Default Value:new Date("March 15, 2019 12:00:00 UTC")

The current date and time of the simulated sun. When setting the date, specifying the time zone is important, otherwise the time zone of the browser will be used. This might lead to different lighting for users in different time zones.

waterReflectionEnabled Boolean
optional
Default Value:false

Indicates whether polygons that use WaterSymbol3DLayer display reflections of surrounding terrain, buildings and other 3D objects. This property is used in Realistic water visualization sample.

directShadowsEnabled Boolean
optional
Default Value:false

Indicates whether to show shadows cast by the sun. Shadows are only displayed for real world 3D objects. Terrain doesn't cast shadows. In local scenes at small zoom levels, shadows are not displayed. For more control on which 3D objects cast shadows use the castShadows property available on ObjectSymbol3DLayer, FillSymbol3DLayer, ExtrudeSymbol3DLayer, and PathSymbol3DLayer.

ambientOcclusionEnabled Boolean
optional
Default Value:false

Indicates whether to show ambient occlusion shading.

cameraTrackingEnabled Boolean
optional
Default Value:true

Indicates whether the date and time of the simulated sun is automatically updated to maintain the current time of day while the camera changes.

atmosphereEnabled Boolean
optional

Indicates whether atmosphere visualization is enabled.

atmosphere Accessor
optional

Atmosphere conditions of the scene.

Specification:
quality String
optional
Default Value:low

Indicates the quality of the atmosphere visualization. The quality of the atmosphere may have a significant impact on performance. This setting does not have any effect in local scenes.

Known Value Example
low scene-atmosphere
high scene-atmosphere

Possible Values:"low"|"high"

starsEnabled Boolean
optional
Default Value:true

Indicates whether stars visualization is enabled.

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

Z-values defined in a geographic or metric coordinate system are expressed in meters. However, in local scenes that use a projected coordinate system, vertical units are assumed to be the same as the horizontal units specified by the service.

Default Value:null
See also:
fatalError Error inherited
Since: ArcGIS API 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:
Example:
view.watch("fatalError", function(error) {
  if(error) {
    console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
    view.tryFatalErrorRecovery();
  }
});
floors Collection<string>
Since: ArcGIS API for JavaScript 4.19

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

focused Booleanreadonly inherited
Since: ArcGIS API 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:
Examples:
// Adds a graphic to the View
view.graphics.add(pointGraphic);
// Removes a graphic from the View
view.graphics.remove(pointGraphic);
groundView GroundViewreadonly
Since: ArcGIS API for JavaScript 4.7

The view for the ground of the map.

height Numberreadonly inherited

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.

Default Value:0
heightBreakpoint String

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.

Please refer to the styling guide for additional information on working with this.

Possible Value Description Default thresholds (pixels)
xsmall The height of the view is smaller than the value set in the xsmall breakpoint. < 545
small The height of the view is between the values set in the xsmall and small breakpoints. 545 - 768
medium The height of the view is between the values set in the small and medium breakpoints. 769 - 992
large The height of the view is between the values set in the medium and large breakpoints. 993 - 1200
xlarge The height of the view is larger than the value set in the large breakpoint. > 1200

Possible Values:"xsmall"|"small"|"medium"|"large"|"xlarge"

See also:
Example:
view.watch("heightBreakpoint", function(newVal){
  if (newVal === "xsmall"){
    // clear the view's default UI components if
    // app is used on a mobile device
    view.ui.components = [];
  }
});
highlightOptions Objectautocast
Since: ArcGIS API for JavaScript 4.4

Options for configuring the highlight. Use the highlight method on the appropriate LayerView to highlight a feature. With version 4.19, highlighting a feature influences the shadow of the feature as well. By default, the shadow of the highlighted feature is displayed in a darker shade.

Properties:
color Color
optional
Default Value:#00ffff
Autocasts from Object|Number[]|String

The color of the highlight.

haloColor Color
optional
Default Value:null

An optional color for the halo of the highlight. If unset, the color will be used for the halo.

haloOpacity Number
optional
Default Value:1

The opacity of the highlight halo. This will be multiplied with the opacity specified in color.

fillOpacity Number
optional
Default Value:0.25

The opacity of the fill (area within the halo). This will be multiplied with the opacity specified in color.

shadowColor Color
optional
Default Value:#000000

The color of the highlighted feature's shadow.

shadowOpacity Number
optional
Default Value:0.4

The opacity of the highlighted feature's shadow. This will be multiplied with the opacity specified in shadowColor.

shadowDifference Number
optional
Default Value:0.375

Defines the intensity of the shadow area obtained by overlapping the shadow of the highlighted feature and the shadow of other objects in the scene. The value ranges from 0 to 1. A value of 0 highlights the overlapping shadow areas in the same way (no difference). Setting it to 1 highlights only the difference between the shadow areas, so the overlapping shadow areas aren't highlighted at all. Here is an example of what the shadow highlight looks like with different values:

shadow-highlight

See also:
Example:
const view = new SceneView({
  map: map,
  highlightOptions: {
    color: [255, 255, 0, 1],
    haloColor: "white",
    haloOpacity: 0.9,
    fillOpacity: 0.2,
    shadowColor: "black",
    shadowOpacity: 0.5
  }
});
input Inputreadonly inherited
Since: ArcGIS API for JavaScript 4.9

Options to configure input handling of the View.

Example:
// Make gamepad events to emit independently of focus.
view.input.gamepad.enabledFocusMode = "none";
interacting Booleanreadonly inherited

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

Default Value:false

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

See also:
magnifier Magnifierreadonly inherited
Since: ArcGIS API 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).

Default Value:false
Since: ArcGIS API for JavaScript 4.9

Options to configure the navigation behavior of the View.

Example:
// 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
    },
    browserTouchPanEnabled: false,
    momentumEnabled: false,
    mouseWheelZoomEnabled: false
  }
});
orientation Stringreadonly

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

Please refer to the styling guide for additional information on working with this.

Possible Value Description
landscape The width of the view is greater than its height.
portrait The width of the view is equal to or smaller than its height.

Possible Values:"landscape"|"portrait"

padding Object inherited

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. See the view padding sample for an example of how this works.

Properties:
left Number
optional

The left padding (in pixels).

top Number
optional

The top padding (in pixels).

right Number
optional

The right padding (in pixels).

bottom Number
optional

The bottom padding (in pixels).

Default Value:{left: 0, top: 0, right: 0, bottom: 0}
See also:
performanceInfo SceneViewPerformanceInforeadonly
Since: ArcGIS API 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.

This property is experimental and should be used for debugging purposes only. Its interface will change in future releases.

See also:

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

The view has a default instance of Popup with predefined styles and a template for defining content. The content in this default instance may be modified directly in the popup's content or in a layer's PopupTemplate.

You may create a new Popup instance and set it to this property to customize the style, positioning, and content of the popup in favor of using the default popup instance on the view.

Examples:
// This syntax prevents any popups from opening and removes them from the application
view.popup = null;
// This syntax disables the click event on the view
view.popup.autoOpenEnabled = false;
qualityProfile String

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

The low quality profile significantly increases performance on slower browsers and devices by reducing the memory limit to 200MB. The memory limit impacts the SceneLayer's levels of detail and the number of features that are displayed in a FeatureLayer. Furthermore, low quality profile impacts visual quality by reducing map resolution, influencing atmospheric effects and disabling anti-aliasing (edge smoothing).

The high and medium quality profiles differ in the maximum amount of memory which the view is allowed to use (750MB for medium quality and 1.5GB for high quality). A higher memory limit improves quality in complex web scenes with many layers, but can have a negative impact on drawing performance and stability.

Physically based rendering (PBR) materials are enabled on all 3D objects in a SceneView in "high" quality mode. However, if a GLTF model or a 3D Object SceneLayer has PBR settings defined on the material, then these will be rendered in all quality modes.

In "high" quality mode, on a HiDPI display, graphics are rendered at a higher resolution depending on the browser's devicePixelRatio property.

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

The default value is based on the detected browser:

  • low for mobile devices
  • medium for any other browser

Possible Values:"low"|"medium"|"high"

Example:
let view = new SceneView({
  qualityProfile: "high"
});
ready Booleanreadonly inherited

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

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.

Default Value:false
See also:
resizing Booleanreadonly inherited

Indicates if the view is being resized.

Default Value:false
resolution Numberreadonly inherited
Since: ArcGIS API 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.

scale Number

Represents an approximation of the map scale at the center of the view. 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:
Example:
// Set the approximate map scale at the center the view to 1:24,000
view.scale = 24000;
size Number[]readonly inherited

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 Coordinate System or the Geographic Coordinate System used to locate geographic features in the map. In a SceneView the following supported coordinate systems are available.

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

When using an Esri basemap, the default spatial reference is Web Mercator Auxiliary Sphere.

Default Value:null
stationary Booleanreadonly inherited

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

suspended Booleanreadonly inherited

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.

Default Value:true
Since: ArcGIS API 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.

Default Value:null
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.
let view = new MapView({
  map: map,
  container: "viewDiv",
  timeExtent: {
    start: new Date("2019, 2, 24"),
    end:   new Date("2019, 2, 31")
  }
});
type Stringreadonly

The type of the view.

For SceneView the type is always "3d".

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

Examples:
let toggle = new BasemapToggle({
  view: view,
  nextBasemap: "hybrid"
});
// Adds an instance of BasemapToggle widget to the
// top right of the view.
view.ui.add(toggle, "top-right");
// Moves the zoom and BasemapToggle widgets to the
// bottom left of the view.
view.ui.move([ "zoom", toggle ], "bottom-left");
// Removes all the widgets from the bottom left of the view
view.ui.empty("bottom-left");
// Removes the compass widget from the view
view.ui.remove("compass");
// Removes all default UI components, except Attribution.
// Passing an empty array will remove all components.
view.ui.components = [ "attribution" ];
updating Booleanreadonly inherited

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

Default Value:false
viewingMode String

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 scene-global Global scenes allow the entire globe to render in the view, showing the curvature of the earth.
local scene-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.

Possible Values:"global"|"local"

Default Value:global
See also:
viewpoint Viewpointautocast

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:
width Numberreadonly inherited

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.

Default Value:0
widthBreakpoint String

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.

Please refer to the styling guide for additional information on working with this.

Possible Value Description Default thresholds (pixels)
xsmall The width of the view is smaller than the value set in the xsmall breakpoint. < 545
small The width of the view is between the values set in the xsmall and small breakpoints. 545 - 768
medium The width of the view is between the values set in the small and medium breakpoints. 769 - 992
large The width of the view is between the values set in the medium and large breakpoints. 993 - 1200
xlarge The width of the view is larger than the value set in the large breakpoint. > 1200

Possible Values:"xsmall"|"small"|"medium"|"large"|"xlarge"

See also:
Example:
view.watch("widthBreakpoint", function(newVal){
  if (newVal === "xsmall"){
    // clear the view's default UI components if
    // app is used on a mobile device
    view.ui.components = [];
  }
});
zoom 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 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:
Examples:
view.zoom = 3;  // Sets the LOD to 3 (small map scale)
view.zoom = 18; // Sets the LOD to 18 (large map scale)
// Set the zoom level and center in the constructor
let view = new SceneView({
  zoom: 10,
  center: [-120, 34],
  map: map
});

Method Overview

Show inherited methods Hide inherited methods
Name Return Type Summary Class

Destroys the view, and any associated resources, including its map, popup, and UI elements.

more details
more detailsView
Boolean

Emits an event on the instance.

more details
more detailsView

Sets the focus on the view.

more details
more detailsView
Promise

Sets the view to a given target.

more details
more detailsSceneView
Boolean

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

more details
more detailsView
Promise<HitTestResult>

Returns graphics that intersect the specified screen coordinate.

more details
more detailsSceneView
Boolean

isFulfilled() may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected).

more details
more detailsView
Boolean

isRejected() may be used to verify if creating an instance of the class is rejected.

more details
more detailsView
Boolean

isResolved() may be used to verify if creating an instance of the class is resolved.

more details
more detailsView
Object

Registers an event handler on the instance.

more details
more detailsView
Promise<Screenshot>

Create a screenshot of the current view.

more details
more detailsSceneView
Point

Converts the given screen point to a map point.

more details
more detailsSceneView
ScreenPoint

Converts the given map point to a screen point.

more details
more detailsSceneView

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

more details
more detailsView
Promise

when() may be leveraged once an instance of the class is created.

more details
more detailsView
Promise<LayerView>

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

more details
more detailsView

Method Details

destroy()inherited
Since: ArcGIS API 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:
emit(type, event){Boolean}inherited
Since: ArcGIS API for JavaScript 4.5

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

Parameters:
type String

The name of the event.

event Object
optional

The event payload.

Returns:
Type Description
Boolean true if a listener was notified
focus()inherited
Since: ArcGIS API for JavaScript 4.5

Sets the focus on the view.

goTo(target, options){Promise}

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 SceneView.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 SceneView.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.

Parameters:
target GoToTarget3D

The target location/viewpoint to go to. When using an object for target, use the properties defined in GoToTarget3D.

options GoToOptions3D
optional

View transition options. See the specification defined in GoToOptions3D for more information.

Returns:
Type Description
Promise A promise that resolves when the view's extent updates to the extent defined in target.
See also:
Examples:
view.goTo({
  center: [-126, 49],
  heading: 180, // set the heading to point South
  tilt: view.camera.tilt, // maintain tilt value
});
// go to a location defined by a Camera object
let cam = new Camera({
  position: new Point({
    x: -100.23, // lon
    y: 65,      // lat
    z: 10000,   // elevation in meters
  }),

  heading: 180, // facing due south
  tilt: 45      // bird's eye view
});

view.goTo(cam);
// go to a point using center, zoom, tilt, and heading
view.goTo({
  center: [-126, 49],
  zoom: 13,
  tilt: 75,
  heading: 105
});
// goTo returns a Promise which resolves when the animation has finished.
// This promise may be chained to create a sequence of animations.
view.goTo(graphic1)
    .then(function() {
      return view.goTo(graphic2);
    })
    .then(function() {
      return view.goTo(graphic3);
    });
// goTo returns a Promise which resolves when the animation has finished.
// This promise may be chained to create a sequence of animations.
view.goTo(graphic1)
    .then(function() {
      return view.goTo(graphic2);
    })
    .then(function() {
      return view.goTo(graphic3);
    });
hasEventListener(type){Boolean}inherited

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

Parameter:
type String

The name of the event.

Returns:
Type Description
Boolean Returns true if the class supports the input event.
hitTest(screenPoint, options){Promise<HitTestResult>}

Returns graphics that intersect the specified screen coordinate. The following layer types will return a result if a hit is made on an intersecting feature: GraphicsLayer, FeatureLayer, SceneLayer, BuildingSceneLayer, PointCloudLayer, CSVLayer, StreamLayer, GeoJSONLayer, OGCFeatureLayer, and SceneView.graphics.

If no options are specified, graphics that are behind the ground surface will not be returned unless the ground surface is semi-transparent. Otherwise, using the map.ground in the include and exclude options determines whether the ground surface prevents hit testing graphics that are under it.

If the graphics have non-draped IconSymbol3DLayer symbology, then only the first graphic will be returned from the hitTest.

Starting with version 4.11, if a label intersects the specified screen coordinates then the result of the hitTest will contain the graphic associated with that label.

Parameters:
Specification:
screenPoint ScreenPoint|MouseEvent

The screen coordinates (or native mouse event) of the click on the view.

options Object
optional

Intersection test options. By default the map.ground is excluded if its opacity is smaller than one.

Specification:
optional

A list of layers and graphics to include for intersection testing. All layers and graphics will be included if include is not specified.

optional

A list of layers and graphics to include for intersection testing. No layers or graphics will be excluded if exclude is not specified.

Returns:
Type Description
Promise<HitTestResult> When resolved, returns an object containing the graphics (if present) that intersect the given screen coordinates.
See also:
Example:
// Get the screen point from the view's click event
view.on("click", function(event) {
  // Search for graphics at the clicked location. View events can be used
  // as screen locations as they expose an x,y coordinate that conforms
  // to the ScreenPoint definition.
  view.hitTest(event).then(function(response) {
    let result = response.results[0];

    if (result) {
      let lon = result.mapPoint.longitude;
      let lat = result.mapPoint.latitude;

      console.log("Hit graphic at (" + lon + ", " + lat + ")", result.graphic);
    } else {
      console.log("Did not hit any graphic");
    }
  });
});
isFulfilled(){Boolean}inherited

isFulfilled() may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected). If it is fulfilled, true will be returned.

Returns:
Type Description
Boolean Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).
isRejected(){Boolean}inherited

isRejected() may be used to verify if creating an instance of the class is rejected. If it is rejected, true will be returned.

Returns:
Type Description
Boolean Indicates whether creating an instance of the class has been rejected.
isResolved(){Boolean}inherited

isResolved() may be used to verify if creating an instance of the class is resolved. If it is resolved, true will be returned.

Returns:
Type Description
Boolean Indicates whether creating an instance of the class has been resolved.
on(type, modifiersOrHandler, handler){Object}inherited

Registers an event handler on the instance. Call this method to hook an event with a listener. See the Events summary table for a list of listened events.

Parameters:

The name of the event or events to listen for.

modifiersOrHandler String[]|Function

Additional modifier keys to filter events. Please see Key Values for possible values. All the standard key values are supported. Alternatively, if no modifiers are required, the function will call when the event fires.

The following events don't support modifier keys: blur, focus, layerview-create, layerview-destroy, resize.

handler Function
optional

The function to call when the event is fired, if modifiers were specified.

Returns:
Type Description
Object Returns an event handler with a remove() method that can be called to stop listening for the event.
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);
});

// Fires `pointer-move` event when user clicks on "Shift"
// key and moves the pointer on the view.
view.on('pointer-move', ["Shift"], function(event){
  let point = view2d.toMap({x: event.x, y: event.y});
  bufferPoint(point);
});
takeScreenshot(options){Promise<Screenshot>}
Since: ArcGIS API for JavaScript 4.9

Create a screenshot of the current view. Screenshots include only elements that are rendered on the canvas (all geographical elements), but excludes overlayed DOM elements (UI, popups, etc.). By default, a screenshot of the whole view is created. Different options allow for creating different types of screenshots, including taking screenshots at different aspect ratios, different resolutions and creating thumbnails.

Screenshots are always taken inside the padded area of the view (see padding).

Parameters:
Specification:
options Object
optional

Screenshot options.

Specification:
format String
optional
Default Value: png

The format of the resulting encoded data url.

Possible Values:"jpg"|"png"

quality Number
optional
Default Value: 98

The quality (0 to 100) of the encoded image when format is jpg.

width Number
optional

The width of the screenshot (defaults to the area width). The height will be derived automatically if left unspecified, according to the aspect ratio of the of the screenshot area.

height Number
optional

The height of the screenshot (defaults to the area height). The width will be derived automatically if left unspecified, according to the aspect ratio of the screenshot area.

area Object
optional

Specifies whether to take a screenshot of a specific area of the view. The area coordinates are relative to the origin of the padded view (see padding) and will be clipped to the view size. Defaults to the whole view (padding excluded).

Specification:
x Number
optional

The x coordinate of the area.

y Number
optional

The y coordinate of the area.

width Number
optional

The width of the area.

height Number
optional

The height of the area.

ignorePadding Boolean
optional

Indicates whether view padding should be ignored. Set this property to true to allow padded areas to be included in the screenshot.

Returns:
Type Description
Promise<Screenshot> When resolved, returns an object containing an encoded dataUrl and raw image data.
See also:
Examples:
// Take a screenshot at the same resolution of the current view
view.takeScreenshot().then(function(screenshot) {
  let imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});
// Create a square thumbnail from the current view
let options = {
  width: 200,
  height: 200
};

view.takeScreenshot(options).then(function(screenshot) {
  let imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});
// Take a high resolution, square screenshot
let options = {
  width: 2048,
  height: 2048
};

view.takeScreenshot(options).then(function(screenshot) {
  let imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});
// Take a screenshot of a small area at the center of the view

// Compute the size of the view excluding potential padding
let padding = view.padding;
let innerWidth = view.width - padding.left - padding.right;
let innerHeight = view.height - padding.top - padding.bottom;

// Desired size of the area
let width = 200;
let height = 200;

let options = {
  area: {
    x: (innerWidth - width) / 2,
    y: (innerHeight - height) / 2,
    width: width,
    height: height
  }
};

view.takeScreenshot(options).then(function(screenshot) {
  let imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});
// Takes a high-resolution screenshot for display on a HiDPI screen
// The pixelRatio indicates the display has 2x the pixel density of typical screens
let pixelRatio = 2;
view.takeScreenshot({ width: view.width * pixelRatio, height: view.height * pixelRatio });
// Takes a high-resolution screenshot for display on a HiDPI screen
// The pixelRatio is the resolution of the display capturing the image
let pixelRatio = window.devicePixelRatio;
view.takeScreenshot({ width: view.width * pixelRatio, height: view.height * pixelRatio });
toMap(screenPoint, options){Point}

Converts the given screen point to a map point.

Parameters:
Specification:
screenPoint ScreenPoint|MouseEvent

The location on the screen (or native mouse event) to convert.

options Object
optional

Intersection test options. By default only the map.ground and any IntegratedMeshLayer are included.

Specification:
optional

A list of layers and graphics to include for intersection testing. All layers and graphics will be included if include is not specified.

optional

A list of layers and graphics to include for intersection testing. No layers or graphics will be excluded if exclude is not specified.

Returns:
Type Description
Point The map point corresponding to the given screen point.
toScreen(point){ScreenPoint}

Converts the given map point to a screen point.

Parameter:
point Point

A point geometry.

Returns:
Type Description
ScreenPoint The screen point corresponding to the given map point.
tryFatalErrorRecovery()inherited
Since: ArcGIS API for JavaScript 4.12

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

See also:
Example:
view.watch("fatalError", function(error) {
  if(error) {
    view.tryFatalErrorRecovery();
  }
});
when(callback, errback){Promise}inherited
Since: ArcGIS API for JavaScript 4.6

when() may be leveraged once an instance of the class is created. This method takes two input parameters: a callback function and an errback function. The callback executes when the instance of the class loads. The errback executes if the instance of the class fails to load.

Parameters:
callback Function
optional

The function to call when the promise resolves.

errback Function
optional

The function to execute when the promise fails.

Returns:
Type Description
Promise Returns a new promise for the result of callback that may be used to chain additional functions.
Example:
// Although this example uses MapView, any class instance that is a promise may use when() in the same way
let view = new MapView();
view.when(function(){
  // This function will execute once the promise is resolved
}, function(error){
  // This function will execute if the promise is rejected due to an error
});
whenLayerView(layer){Promise<LayerView>}inherited

Gets the LayerView created on the view for the given layer. The returned promise resolves when the layer view for the given layer has been created, or rejects with an error (for example if the layer is not part of the view, or if the layer type is not supported in this view).

Parameter:
layer Layer

The layer for which to obtain its LayerView.

Returns:
Type Description
Promise<LayerView> Resolves to an instance of LayerView for the specified layer.
See also:
Example:
// Create a feature layer from a url pointing to a Feature Service
let layer = new FeatureLayer(url);

map.add(layer);

view.whenLayerView(layer)
    .then(function(layerView) {
      // The layerview for the layer
    })
    .catch(function(error) {
      // An error occurred during the layerview creation
    });

Type Definitions

EasingFunction(t, duration){Number}

User provided easing function. The function receives a normalized time between 0 and 1 as input and should provide a transformed normalized time between 0 and 1 as output.

Parameters:
t Number

The input time (from 0 to 1)

duration Number

The total duration (in milliseconds) of the animation. This may be used for heuristics on deciding what type of easing to perform.

Returns:
Type Description
Number a value between 0 and 1
Example:
// Simple quadratic ease in function
function easeIn(t) {
  return t * t;
}
GoToOptions3D Object

Animation options for the goTo() method. See properties below for parameter specifications.

Properties:
animate Boolean
optional
Default Value:true

Indicates if the transition to the new view should be animated. If set to false, speedFactor, duration, maxDuration, and easing properties are ignored.

speedFactor Number
optional
Default Value:1

Increases or decreases the animation speed by the specified factor. A speedFactor of 2 will make the animation twice as fast, while a speedFactor of 0.5 will make the animation half as fast. Setting the speed factor will automatically adapt the default maxDuration accordingly.

duration Number
optional

Set the exact duration (in milliseconds) of the animation. Note that by default, animation duration is calculated based on the time required to reach the target at a constant speed. Setting duration overrides the speedFactor option. Note that the resulting duration is still limited to the maxDuration.

maxDuration Number
optional
Default Value:8000

The maximum allowed duration (in milliseconds) of the animation. The default maxDuration value takes the specified speedFactor into account.

optional

The easing function to use for the animation. This may either be a preset (named) function, or a user specified function. Supported named presets are: linear, in-cubic, out-cubic, in-out-cubic, in-expo, out-expo, in-out-expo, in-out-coast-quadratic. See easing functions for graphical representations of these functions.

By default, animations that are less than 1000 ms use the out-expo easing function; longer animations use the in-out-coast-quadratic easing function.

Possible Values:"linear"|"in-cubic"|"out-cubic"|"in-out-cubic"|"in-expo"|"out-expo"|"in-out-expo"|"in-out-coast-quadratic"

signal AbortSignal
optional

An AbortSignal to abort the animation. If canceled, the promise will be rejected with an error named AbortError. See also AbortController.

The target location/viewpoint to animate to in the goTo() method. A two or three-element array of numbers represents the [x,y,z] coordinates to center the view on. When using an object for the target, use the properties in the table below.

Properties:
optional

The target of the animation.

center Number[]|Point
optional

The SceneView.center to go to.

scale Number
optional

The SceneView.scale to go to.

zoom Number
optional

The final zoom value to go to.

heading Number
optional

The Camera.heading to go to.

tilt Number
optional

The Camera.tilt to go to.

position Point
optional

The Camera.position to go to.

HitTestResult

Object specification for the result of the hitTest() method.

Properties:
results Object[]

An array of result objects returned from the hitTest(). Results are returned when the location of the input screen coordinates intersect a Graphic in the view. If the graphics have non-draped IconSymbol3DLayer symbology, then only the first graphic will be returned from the hitTest. See the table below for the specification of each object in this array.

Specification:
graphic Graphic

A graphic present in the view that intersects the input screen coordinates. Starting with version 4.11, if a label intersects the input screen coordinates the corresponding graphic is returned. If the graphic comes from a layer with an applied Renderer, then the symbol property will be empty. Other properties will be empty based on the context in which the graphic is fetched. Some layers do not have a graphic.geometry (for example: SceneLayer and PointCloudLayer). The graphic.attributes only includes attributes which are loaded by the client, for this reason it can be a subset of all attributes. FeatureLayer.outFields with ["*"] can be used to force all attributes to be present. The graphic.symbol exists only for graphics coming from GraphicsLayer or view.graphics but it is possible to compute the displayed symbology with getDisplayedSymbol.

mapPoint Point

The point geometry in the spatial reference of the view corresponding with the input screen coordinates.

distance Number

The distance from the camera position to the point geometry hit on this graphic. In global scenes the distance will be in meters while in local scenes the distance will be in the unit of the spatial reference of the view.

ground Object

Ground intersection result. The ground hit result will always be returned, even if the ground was excluded from the hitTest.

Specification:
mapPoint Point

The point at which the ground was hit while performing the hitTest. This may be null when the ground was not hit at all (for example by clicking on the sky).

distance Number

The distance from camera position to the ground hit. The distance will be 0 if the ground was not hit at all. In global scenes the distance will be in meters while in local scenes the distance will be in the unit of the spatial reference of the view.

screenPoint ScreenPoint|MouseEvent

The screen coordinates (or native mouse event) of the click on the view.

A layer or graphic to be used in toMap and hitTest filter options.

See also:
ScreenPoint
Since: ArcGIS API for JavaScript 4.11

An object representing a point on the screen.

Properties:
x Number

The x coordinate.

y Number

The y coordinate.

Screenshot
Since: ArcGIS API for JavaScript 4.9

Object returned when takeScreenshot() promise resolves:

Properties:
dataUrl String

A data url representing the screenshot.

data ImageData

The raw RGBA image data.

Event Overview

Show inherited events Hide inherited events
Name Type Summary Class
{target: View,native: Object}

Fires when browser focus is moved away from the view.

more details
more details View
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0,1,2,type: "click",stopPropagation: Function,timestamp: Number,native: Object}

Fires after a user clicks on the view.

more details
more details View
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0,1,2,type: "double-click",stopPropagation: Function,timestamp: Number,native: Object}

Fires after double-clicking on the view.

more details
more details View
{action: "start","added","update","removed","end",x: Number,y: Number,origin: Object,button: 0,1,2,buttons: Number,type: "drag",radius: Number,angle: Number,stopPropagation: Function,timestamp: Number,native: Object}

Fires during a pointer drag on the view.

more details
more details View
{target: View,native: Object}

Fires when browser focus is on the view.

more details
more details View
{mapPoint: Point,x: Number,y: Number,button: 0,1,2,buttons: Number,type: "hold",stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more details View
{mapPoint: Point,x: Number,y: Number,button: 0,1,2,buttons: Number,type: "immediate-click",stopPropagation: Function,timestamp: Number,native: Object}

Fires right after a user clicks on the view.

more details
more details View
{mapPoint: Point,x: Number,y: Number,button: 0,1,2,buttons: Number,type: "immediate-double-click",stopPropagation: Function,timestamp: Number,native: Object}

Is emitted after two consecutive immediate-click events.

more details
more details View
{repeat: Boolean,key: String,type: "key-down",stopPropagation: Function,timestamp: Number,native: Object}

Fires after a keyboard key is pressed.

more details
more details View
{type: "key-up",key: String,stopPropagation: Function,timestamp: Number,native: Object}

Fires after a keyboard key is released.

more details
more details View
{layer: Layer,layerView: LayerView}

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

more details
more details View
{layer: Layer,error: Error}

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

more details
more details View
{layer: Layer,layerView: LayerView}

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

more details
more details View
{x: Number,y: Number,deltaY: Number,type: "mouse-wheel",stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more details View
{pointerId: Number,pointerType: "mouse","touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-down",stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more details View
{pointerId: Number,pointerType: "mouse","touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-enter",stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more details View
{pointerId: Number,pointerType: "mouse","touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-leave",stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more details View
{pointerId: Number,pointerType: "mouse","touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-move",stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more details View
{pointerId: Number,pointerType: "mouse","touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-up",stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more details View
{oldWidth: Number,oldHeight: Number,width: Number,height: Number}

Fires when the view's size changes.

more details
more details View

Event Details

blurinherited
Since: ArcGIS API for JavaScript 4.7

Fires when browser focus is moved away from the view.

Properties:
target View

The view that the browser focus is moved away from.

native Object

A standard DOM KeyboardEvent.

clickinherited

Fires after a user clicks on the view. This event emits slightly slower than an immediate-click event to make sure that a double-click event isn't triggered instead. The immediate-click event can be used for responding to a click event without delay.

Properties:
mapPoint Point

The point location of the click on the view in the spatial reference of the map.

x Number

The horizontal screen coordinate of the click on the view.

y Number

The vertical screen coordinate of the click on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates the current mouse button state.

Value Description
0 left click (or touch)
1 middle click
2 right click

Possible Values:0|1|2

type String

The event type.

The value is always "click".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was emitted.

native Object

A standard DOM PointerEvent.

See also:
Examples:
// Set up a click event handler and retrieve the screen point
view.on("click", function(event) {
 // the hitTest() checks to see if any graphics in the view
 // intersect the given screen x, y coordinates
 view.hitTest(event)
  .then(getGraphics);
});
view.on("click", function(event) {
 // you must overwrite default click-for-popup
 // behavior to display your own popup
 view.popup.autoOpenEnabled = false;

 // Get the coordinates of the click on the view
 let lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
 let lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

 view.popup.open({
   // Set the popup's title to the coordinates of the location
   title: "Reverse geocode: [" + lon + ", " + lat + "]",
   location: event.mapPoint // Set the location of the popup to the clicked location
   content: "This is a point of interest"  // content displayed in the popup
 });
});
double-clickinherited

Fires after double-clicking on the view.

Properties:
mapPoint Point

The point location of the click on the view in the spatial reference of the map.

x Number

The horizontal screen coordinate of the click on the view.

y Number

The vertical screen coordinate of the click on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates the current mouse button state.

Value Description
0 left click (or touch)
1 middle click
2 right click

Possible Values:0|1|2

type String

The event type.

The value is always "double-click".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was emitted.

native Object

A standard DOM PointerEvent.

Example:
view.on("double-click", function(event) {
  // The event object contains the mapPoint and the screen coordinates of the location
  // that was clicked.
  console.log("screen point", event.x, event.y);
  console.log("map point", event.mapPoint);
});
draginherited

Fires during a pointer drag on the view.

Properties:
action String

Indicates the state of the drag. The two values added and removed indicate a change in the number of pointers involved.

Possible Values:"start"|"added"|"update"|"removed"|"end"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

origin Object

Screen coordinates of the start of the drag.

Specification:
x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked at the start of the drag. See MouseEvent.button.

Value Description
0 left mouse button (or touch)
1 middle mouse button
2 right mouse button

Possible Values:0|1|2

buttons Number

Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.

type String

The event type.

The value is always "drag".

radius Number

The radius of a sphere around the multiple pointers involved in this drag. Or 0 while only a single pointer is used.

angle Number

Amount of rotation (in degrees) since the last event of type start.

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was emitted.

native Object

A standard DOM MouseEvent.

Example:
view.on("drag", function(event){
 // Print out the current state of the
 // drag event.
 console.log("drag state", event.action);
});
focusinherited
Since: ArcGIS API for JavaScript 4.7

Fires when browser focus is on the view.

Properties:
target View

The view that the browser focus is currently on.

native Object

A standard DOM KeyboardEvent.

holdinherited

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

Properties:
mapPoint Point

The point location of the click on the view in the spatial reference of the map.

x Number

The horizontal screen coordinate of the hold on the view.

y Number

The vertical screen coordinate of the hold on the view.

button Number

Indicates which mouse button was held down. See MouseEvent.button.

Value Description
0 left mouse button (or touch)
1 middle mouse button
2 right mouse button

Possible Values:0|1|2

buttons Number

Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.

type String

The event type.

The value is always "hold".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was emitted.

native Object

A standard DOM PointerEvent.

Example:
view.on("hold", function(event) {
  // The event object contains the mapPoint and the screen coordinates of the location
  // that was clicked.
  console.log("hold at screen point", event.x, event.y);
  console.log("hold at map point", event.mapPoint);
});
immediate-clickinherited
Since: ArcGIS API for JavaScript 4.7

Fires right after a user clicks on the view. In contrast to the click event, the immediate-click event is emitted as soon as the user clicks on the view, and is not inhibited by a double-click event. This event is useful for interactive experiences that require feedback without delay.

Properties:
mapPoint Point

The point location of the click on the view in the spatial reference of the map.

x Number

The horizontal screen coordinate of the click on the view.

y Number

The vertical screen coordinate of the click on the view.

button Number

Indicates which mouse button was clicked. See MouseEvent.button.

Value Description
0 left click (or touch)
1 middle click
2 right click

Possible Values:0|1|2

buttons Number

Indicates which buttons are pressed when the event is triggered. See MouseEvent.buttons.

type String

The event type.

The value is always "immediate-click".

stopPropagation Function

Prevents the event bubbling up the event chain. Inhibits the associated click and double-click events.

timestamp Number

Time stamp (in milliseconds) at which the event was emitted.

native Object

A standard DOM PointerEvent.

Example:
// Set up an immediate-click event handler and retrieve the screen point
view.on("immediate-click", function(event) {
 // the hitTest() checks to see if any graphics in the view
 // intersect the given screen x, y coordinates
 view.hitTest(event)
  .then(getGraphics);
});
immediate-double-clickinherited
Since: ArcGIS API for JavaScript 4.15

Is emitted after two consecutive immediate-click events. In contrast to double-click, an immediate-double-click cannot be prevented by use of stopPropagation on the immediate-click event and can therefore be used to react to double-clicking independently of usage of the immediate-click event.

Properties:
mapPoint Point

The point location of the click on the view in the spatial reference of the map.

x Number

The horizontal screen coordinate of the click on the view.

y Number

The vertical screen coordinate of the click on the view.

button Number

Indicates which mouse button was clicked. See MouseEvent.button.

Value Description
0 left click (or touch)
1 middle click
2 right click

Possible Values:0|1|2

buttons Number

Indicates which buttons are pressed when the event is triggered. See MouseEvent.buttons.

type String

The event type.

The value is always "immediate-double-click".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was emitted.

native Object

A standard DOM PointerEvent.

key-downinherited

Fires after a keyboard key is pressed.

Properties:
repeat Boolean

Indicates whether this is the first event emitted due to the key press, or a repeat.

key String

The key value that was pressed, according to the MDN full list of key values.

type String

The event type.

The value is always "key-down".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was emitted.

native Object

A standard DOM KeyboardEvent.

Example:
// Zoom in when user clicks on "a" button
// Zoom out when user clicks on "s" button
view.on("key-down", function(event){
 console.log("key-down", event);

 if (event.key === "a"){
   let zm = view.zoom + 1;

   view.goTo({
     target: view.center,
     zoom: zm
   });
 }
 else if(event.key == "s"){
   let zm = view.zoom - 1;

   view.goTo({
     target: view.center,
     zoom: zm
   });
 }
});
key-upinherited

Fires after a keyboard key is released.

Properties:
type String

The event type.

The value is always "key-up".

key String

The key value that was released, according to the MDN full list of key values.

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was emitted.

native Object

A standard DOM KeyboardEvent.

layerview-createinherited

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

Properties:
layer Layer

The layer in the map for which the layerView was created.

layerView LayerView

The LayerView rendered in the view representing the layer in layer.

See also:
Example:
// This function fires each time a layer view is created for a layer in
// the map of the view.
view.on("layerview-create", function(event) {
  // The event contains the layer and its layer view that has just been
  // created. Here we check for the creation of a layer view for a layer with
  // a specific id, and log the layer view
  if (event.layer.id === "satellite") {
    // The LayerView for the desired layer
    console.log(event.layerView);
  }
});
layerview-create-errorinherited

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

Properties:
layer Layer

The layer in the map for which the view emitting this event failed to create a layer view.

error Error

An error object describing why the layer view failed to create.

See also:
Example:
// This function fires each time an error occurs during the creation of a layerview
view.on("layerview-create-error", function(event) {
  console.error("LayerView failed to create for layer with the id: ", event.layer.id);
});
layerview-destroyinherited

Fires after a LayerView is destroyed and is no longer rendered in the view. This happens for example when a layer is removed from the map of the view.

Properties:
layer Layer

The layer in the map for which the layerView was destroyed.

layerView LayerView

The LayerView that was destroyed in the view.

mouse-wheelinherited

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

Properties:
x Number

The horizontal screen coordinate of the click on the view.

y Number

The vertical screen coordinate of the click on the view.

deltaY Number

Number representing the vertical scroll amount.

type String

The event type.

The value is always "mouse-wheel".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was emitted.

native Object

A standard DOM WheelEvent.

Example:
view.on("mouse-wheel", function(event){
 // deltaY value is positive when wheel is scrolled up
 // and it is negative when wheel is scrolled down.
 console.log(event.deltaY);
});
pointer-downinherited

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

Properties:
pointerId Number

Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.

pointerType String

Indicates the pointer type.

Possible Values:"mouse"|"touch"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.

type String

The event type.

The value is always "pointer-down".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was emitted.

native Object

A standard DOM PointerEvent.

pointer-enterinherited

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

Properties:
pointerId Number

Uniquely identifies a pointer between multiple events. Ids might get reused after a pointer-up event.

pointerType String

Indicates the pointer type.

Possible Values:"mouse"|"touch"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.

type String

The event type.

The value is always "pointer-enter".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was created.

native Object

A standard DOM PointerEvent.

pointer-leaveinherited

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

Properties:
pointerId Number

Uniquely identifies a pointer between multiple events. Ids might get reused after a pointer-up event.

pointerType String

Indicates the pointer type.

Possible Values:"mouse"|"touch"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.

type String

The event type.

The value is always "pointer-leave".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was created.

native Object

A standard DOM PointerEvent.

pointer-moveinherited

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

Properties:
pointerId Number

Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.

pointerType String

Indicates the pointer type.

Possible Values:"mouse"|"touch"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.

type String

The event type.

The value is always "pointer-move".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

Time stamp (in milliseconds) at which the event was created.

native Object

A standard DOM PointerEvent.

Example:
// Fires `pointer-move` event when user clicks on "Shift"
// key and moves the pointer on the view.
view.on('pointer-move', ["Shift"], function(event){
  let point = view.toMap({x: event.x, y: event.y});
  bufferPoint(point);
});
pointer-upinherited

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

Properties:
pointerId Number

Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.

pointerType String

Indicates the pointer type.

Possible Values:"mouse"|"touch"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.

type String

The event type.

The value is always "pointer-up".

stopPropagation Function

Prevents the event bubbling up the event chain. Inhibits the associated immediate-click, click and double-click events.

timestamp Number

Time stamp (in milliseconds) at which the event was created.

native Object

A standard DOM PointerEvent.

resizeinherited

Fires when the view's size changes.

Properties:
oldWidth Number

The previous view width in pixels

oldHeight Number

The previous view height in pixels

width Number

The new measured view width in pixels

height Number

The new measured view height in pixels

See also: