ESM: import SceneView from "@arcgis/core/views/SceneView.js";
CDN: const SceneView = await $arcgis.import("@arcgis/core/views/SceneView.js");
Class: @arcgis/core/views/SceneView
Since: ArcGIS Maps SDK for JavaScript 4.0
A SceneView displays a 3D view of a Map or WebScene instance. To render a map and its layers in 2D, see the documentation for MapView. For a general overview of views, see View.
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"
});
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.
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.
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 Wheel or Middle-click+Drag Zoom in or out at the cursor Shift + Scroll Wheel or Shift + Middle-click+Drag Change the camera field of view (focal length) 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 finger 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 sceneTo 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 devicesGamepad 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.
To disable gamepad navigation, you can set view.navigation.gamepad.enabled to false.
Note:
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).
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
});
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 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, WGS84, CGCS2000, Mars_2000_(Sphere), GCS_Mars_2000 or GCS_Moon_2000 then the viewingMode will default to global. For any other spatial reference the viewingMode will default to local.
The SceneView supports following coordinate systems in a global scene:
In a local scene the following coordinate systems are supported:
Noncached layers can be added to scenes with any spatial reference since they will be reprojected to the scene spatial reference.
Cached tiled layers and scene layers can generally only be added to scenes with the same spatial reference. There is limited support for reprojecting cached layers in WebMercator and WGS84 scenes. The following table lists supported spatial references for each viewing mode and spatial reference combination:
viewing mode spatial reference tiled layer spatial reference scene layer spatial reference global WebMercator WebMercator WGS84 [1], WebMercator, CGCS2000 global WGS84 WGS84 WGS84 [1], WebMercator, CGCS2000 local WebMercator WebMercator WebMercator [1], WGS84 local WGS84 WGS84, WebMercator [2] WGS84, WebMercator local Projected CS same as view same as view [1] global CGCS2000 CGCS2000 CGCS2000 [1], WGS84, WebMercatorSee spatialReference to learn how the spatial reference of a SceneView is derived.
Using elevation dataThe 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 eventsWhen 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).
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 emitted 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.
Constructors new SceneView(properties)
Parameter
optionalSee 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()
});Show inherited properties Hide inherited properties
Name Type Summary Class allLayerViews Collection<LayerView>Collection containing a flat list of all the created LayerViews related to the basemap, operational layers, and group layers in this view.
View alphaCompositingEnabled BooleanAllows the view to be partially or fully transparent when composited with the webpage elements behind it.
SceneView analyses Collection<AnalysisUnion>Allows for adding analyses directly to the default analyses in the View.
SceneView animation ViewAnimation|null|undefinedRepresents an ongoing view animation initialized by goTo().
SceneView basemapView BasemapViewRepresents the view for a single basemap after it has been added to the map.
View breakpoints ObjectA convenience property used for defining the breakpoints on the height and width of the view.
SceneView camera CameraThe observation point from which the visible portion (or perspective) of the SceneView is determined.
SceneView center PointRepresents 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]).
Represents an optional clipping area used to define the visible extent of a local scene.
SceneView constraints AccessorSpecifies constraints for Camera tilt and altitude that may be applied to the SceneView.
SceneView container HTMLDivElement|null|undefinedThe id or node representing the DOM element containing the view.
The name of the class.
Accessor displayFilterEnabled BooleanIndicates whether displayFilters are honored across all layers in the view.
View environment AccessorSpecifies various properties of the environment's visualization in the view.
SceneView extent ExtentThe extent represents the visible portion of a map within the view as an instance of an Extent.
SceneView fatalError Error|null|undefinedA fatal error returned when the view loses its WebGL context.
View floors Collection<string>Applies a display filter on the view for a specific set of floor levels.
SceneView focused BooleanIndicates if the browser focus is on the view.
SceneView graphics Collection<Graphic>Allows for adding graphics directly to the default graphics in the View.
View groundView GroundViewThe view for the ground of the map.
SceneView height NumberThe height of the view in pixels read from the view container element.
SceneView heightBreakpoint StringA convenience property indicating the general size of the view's height.
SceneView highlightOptions HighlightOptionsOptions for configuring the highlight.
SceneView highlights Collection<HighlightOptions>Represents a collection of HighlightOptions objects which can be used to highlight features throughout an application.
View input InputOptions to configure input handling of the View.
View interacting BooleanIndication whether the view is being interacted with (for example when panning or by an interactive tool).
View layerViews Collection<LayerView>A collection containing a hierarchical list of all the created LayerViews of the operational layers in the map.
View magnifier MagnifierThe magnifier allows for showing a portion of the view as a magnifier image on top of the view.
View map Map|null|undefinedAn instance of a Map object to display in the view.
View navigating BooleanIndication whether the view is being navigated (for example when panning).
View navigation NavigationOptions to configure the navigation behavior of the View.
View orientation StringA convenience property indicating the view's orientation.
SceneView padding ObjectUse the padding property to make the center, and extent, etc.
View performanceInfo SceneViewPerformanceInfoThis property contains performance information in a SceneView like global memory usage and additional details for layers about memory consumption and number of features.
SceneView popup Popup|null|undefinedA Popup object that displays general content or attributes from layers in the map.
SceneView popupEnabled BooleanControls whether the popup opens when users click on the view.
SceneView qualityProfile StringSceneView can draw scenes in three different quality modes: high, medium and low.
When true, this property indicates whether the view successfully satisfied all dependencies, signaling that the following conditions are met.
Provides more granular information about the view's process of becoming ready.
View resizing BooleanIndicates if the view is being resized.
SceneView resolution NumberRepresents the current value of one pixel in the unit of the view's spatialReference.
View scale NumberRepresents an approximation of the map scale.
SceneView size Number[]An array containing the width and height of the view in pixels, e.g.
SceneView spatialReference SpatialReferenceThe spatial reference of the view.
SceneView stationary BooleanIndication whether the view is animating, being navigated with or resizing.
View suspended BooleanIndicates if the view is visible on the page.
SceneView theme Theme|null|undefinedThis property specifies the base colors used by some widgets and components to render graphics and labels.
View tileInfo TileInfo|null|undefinedThe tiling scheme information of the view.
SceneView timeExtent TimeExtent|null|undefinedThe view's time extent.
View type StringThe type of the view.
SceneView ui DefaultUIExposes the default widgets available in the view and allows you to toggle them on and off.
SceneView updating BooleanIndicates whether the view is being updated by additional data requests to the network, or by processing received data.
View viewingMode StringThe viewing mode (local or global).
Represents the current view as a Viewpoint or point of observation on the view.
SceneView visibleArea Polygon|null|undefinedThe visibleArea represents the visible portion of a map within the view as an instance of a Polygon.
SceneView width NumberThe width of the view in pixels read from the view container element.
SceneView widthBreakpoint StringA convenience property indicating the general size of the view's width.
SceneView zoom NumberRepresents the level of detail (LOD) at the center of the view.
SceneView Property DetailsCollection containing a flat list of all the created LayerViews related to the basemap, operational layers, and group layers in this view.
alphaCompositingEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.8 SceneView since 4.0, alphaCompositingEnabled added at 4.8.
Allows the view to be partially or fully transparent when composited with the webpage elements behind it.
This property can only be set once at construction time. When alpha compositing is enabled, web scenes are less performant. It is important to set this property to true only when you need to apply transparency on the view.
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
}
})Allows for adding analyses directly to the default analyses in the View.
Examples
// Adds an analysis to the View
view.analyses.add(lineOfSightAnalysis);// Removes an analysis from the View
view.analyses.remove(lineOfSightAnalysis);Represents an ongoing view animation initialized by goTo(). You may watch this property to be notified of animation state changes.
Example
view.goTo(target, { speedFactor: 0.1 });
reactiveUtils.watch(
() => view.animation?.state,
(state) => {
switch (state) {
case "finished":
console.log("Animation finished.");
break;
case "stopped":
console.log("Animation stopped.");
break;
}
}
);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.
Example
// Instead of watching the size or resizing properties
reactiveUtils.watch(() => view.size, () => {});
reactiveUtils.watch(() => view.resizing, () => {});
// Set up a watch handle for breakpoint
reactiveUtils.watch(
() => view.widthBreakpoint,
(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.
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
});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.
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;Represents an optional clipping area used to define the visible extent of a local scene. The clipping area cannot have z-values.
If defined, only features that intersect the area will be displayed. The clipping area applies to all layers types, including the ground and the basemap. The clipping area will not increase the area beyond the union of the extents of all layers, including the ground and the basemap. To do so, add a GraphicsLayer with a custom fullExtent to the scene.
The clippingArea property only applies to local scenes.
The clippingArea property contains an internal reference which may be modified in the future. To persist or modify the clippingArea, create a clone using clippingArea.clone().
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);Specifies constraints for Camera tilt and altitude that may be applied to the SceneView. See the object specification table below for details.
Specifies a constraint on the minimum and maximum allowed camera altitude.
Known Limitations
The altitude constraint is only supported in scenes with global viewingMode.
Default Value:-200_000
The minimum allowed camera altitude (in meters).
The maximum allowed camera altitude (in meters). Default is 4 times planet radius.
Specifies the near and far webgl clip distances.
The near clip distance.
The far clip distance.
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"
Specifies a constraint on the amount of allowed tilting of the view.
Specifies the maximum amount of tilt (in degrees) allowed in the view and may range from 0.5 to 179.5 degrees.
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"
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
});Inherited
Property declaredClass Stringreadonly
Since: ArcGIS Maps SDK for JavaScript 4.7 Accessor since 4.0, declaredClass added at 4.7.
The name of the class. The declared class name is formatted as esri.folder.className.
Inherited
Property displayFilterEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.32 View since 4.0, displayFilterEnabled added at 4.32.
Indicates whether displayFilters are honored across all layers in the view. If false, display filters are ignored on all layers and all features are rendered. To ignore display filters on a per-layer basis, set the layer's displayFilterEnabled property to false.
Specifies various properties of the environment's visualization in the view. The SceneView will redraw automatically when any property of environment changes.
Modifying the lighting:
let view = new SceneView({
map: map,
container: "viewDiv"
});
// Set the light source position to reflect the current sun position at that time
view.environment.lighting = {
type: "sun",
date: new Date("January 1, 2022 12:00:00 UTC")
};
// Change the lighting to virtual, so that everything in the scene is nicely lit:
view.environment.lighting = {
type: "virtual"
};
// Enable displaying shadows cast by the light source
view.environment.lighting.directShadowsEnabled = true;
Setting the background:
// Set a background color
let view = new SceneView({
container: "viewDiv",
map: map,
environment: {
background: {
type: "color",
color: [255, 252, 244, 1]
},
starsEnabled: false,
atmosphereEnabled: false
}
});
Changing the weather in the scene:
let view = new SceneView({
container: "viewDiv",
map: new Map({
basemap: "satellite",
ground: "world-elevation"
}),
environment: {
weather: {
type: "cloudy" // autocasts as new CloudyWeather()
}
}
});
The extent represents the visible portion of a map within the view as an instance of an Extent. Setting the extent immediately changes the view without animation. To animate the view, see goTo().
Rather than using extent to change the visible portion of the map in a SceneView, you should use camera since it easily allows you to define the heading, elevation and tilt of the observation point from which the view's perspective is created.
When set in the constructor, this property overrides the center, scale, and zoom properties. This property will be ignored if the viewpoint or camera are also set in the constructor.
The extent property contains an internal reference which may be modified in the future. To persist or modify the extent, create a clone using extent.clone().
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.
Since: ArcGIS Maps SDK for JavaScript 4.12 View since 4.0, fatalError added at 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.
Example
reactiveUtils.when(
() => view.fatalError,
() => {
console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
view.tryFatalErrorRecovery();
}
);Since: ArcGIS Maps SDK for JavaScript 4.19 SceneView since 4.0, floors added at 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
Since: ArcGIS Maps SDK for JavaScript 4.7 SceneView since 4.0, focused added at 4.7.
Indicates if the browser focus is on the view.
Allows for adding graphics directly to the default graphics in the View.
Examples
// Adds a graphic to the View
view.graphics.add(pointGraphic);// Removes a graphic from the View
view.graphics.remove(pointGraphic);Since: ArcGIS Maps SDK for JavaScript 4.7 SceneView since 4.0, groundView added at 4.7.
The view for the ground of the map.
height Numberreadonly
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.
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 thexsmall 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"
Example
reactiveUtils.watch(
() => view.heightBreakpoint === "xsmall",
() => {
// clear the view's default UI components if
// the app is used on a mobile device
view.ui.components = [];
}
);Since: ArcGIS Maps SDK for JavaScript 4.4 SceneView since 4.0, highlightOptions added at 4.4.
Deprecated since version 4.32. Use the highlights property instead.Options for configuring the highlight. Use the highlight method on the appropriate LayerView to highlight a feature.
Release-specific changes:
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
}
});Since: ArcGIS Maps SDK for JavaScript 4.32 View since 4.0, highlights added at 4.32.
Represents a collection of HighlightOptions objects which can be used to highlight features throughout an application. Highlighting works by applying highlight options to one or more features. You can configure these options (such as color or opacity) to define how a feature will be visually emphasized.
A maximum of six HighlightOptions objects are supported in the collection, and they can be added, removed, and reordered freely. Their order in the collection determines priority, with the last object having the highest priority. If you apply more than one highlight to a feature, the one that is last within the collection will be applied. The HighlightOptions object must be part of this collection in order to be applied to features.
To highlight a feature, use the highlight() method on the relevant LayerView instance. To apply specific HighlightOptions, include the name in the highlight() method's options parameter. If no name is provided, the feature will use the default highlight options.
In a 2D MapView, a layerView's highlightOptions will take precedence over the MapView's highlights if both properties are set.
The table below shows the default highlight options in the View's highlights collection if the collection has not been modified:
Highlight options name Description Default settings default The default highlight options. Used whenlayerView.highlight() is called without specifying any particular highlight options. { name: "default", color: "cyan", haloOpacity: 1, fillOpacity: 0.25, shadowColor: "black", shadowOpacity: 0.4, shadowDifference: 0.2} temporary The temporary highlight options, pre-configured for common use cases such as hovering over a feature in the view. { name: "temporary", color: "yellow", haloOpacity: 1, fillOpacity: 0.25, shadowColor: "black", shadowOpacity: 0.4, shadowDifference: 0.2 }
Examples
// Use the default highlights collection to apply a highlight to features when you hover over them
// A handler can be used to remove any previous highlight when applying a new one
let hoverHighlight;
view.on("pointer-move", (event) => {
// Search for the first feature in the featureLayer at the hovered location
view.hitTest(event, { include: featureLayer }).then((response) => {
if (response.results[0]) {
const graphic = response.results[0].graphic;
view.whenLayerView(graphic.layer).then((layerView) => {
// Remove any previous highlight, if it exists
hoverHighlight?.remove();
// Highlight the hit features with the temporary highlight options, which are pre-configured for this use case
hoverHighlight = layerView.highlight(graphic, { name: "temporary"});
});
}
});
});// Override the default highlights collection
const view = new MapView({
map: map,
container: "viewDiv",
// Set the highlight options to be used in the view
highlights: [
{ name: "default", color: "orange" },
{ name: "temporary", color: "magenta" },
{ name: "table", color: "cyan", fillOpacity: 0.5, haloOpacity: 0}
]
});// Add highlight options to the collection after initialization
const selectionHighlightOptions = {
name: "selection",
color: "#ff00ff", // bright fuchsia
haloOpacity: 0.8,
fillOpacity: 0.2
};
// Add the options to the highlights collection at the first position
view.highlights.add(selectionGroup, 0);Inherited
Property input Inputreadonly
Since: ArcGIS Maps SDK for JavaScript 4.9 View since 4.0, input added at 4.9.
Options to configure input handling of the View.
Example
// Make gamepad events to emit independently of focus.
view.input.gamepad.enabledFocusMode = "none";Inherited
Property interacting Booleanreadonly
Indication whether the view is being interacted with (for example when panning or by an interactive tool).
Inherited
Property magnifier Magnifierreadonly
Since: ArcGIS Maps SDK for JavaScript 4.19 View since 4.0, magnifier added at 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.
Inherited
Property navigating Booleanreadonly
Indication whether the view is being navigated (for example when panning).
Since: ArcGIS Maps SDK for JavaScript 4.9 View since 4.0, navigation added at 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
},
actionMap: {
dragSecondary: "none", // Disable rotating the view with the right mouse button
mouseWheel: "none" // Disable zooming with the mouse wheel
},
browserTouchPanEnabled: false,
momentumEnabled: 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"
Inherited
Property padding Object
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.
The left padding (in pixels).
optionalThe top padding (in pixels).
optionalThe right padding (in pixels).
optionalThe bottom padding (in pixels).
Default Value:{left: 0, top: 0, right: 0, bottom: 0}
Since: ArcGIS Maps SDK for JavaScript 4.15 SceneView since 4.0, performanceInfo added at 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.
A Popup object that displays general content or attributes from layers in the map.
By default, the popup property is an empty object that allows you to set the popup options. A Popup instance is automatically created and assigned to the view's popup when the user clicks on the view and popupEnabled is true, when the openPopup() method is called, or when some widgets need the popup, such as Search. If popup is null, the popup instance will not be created.
Examples
// Set the view's popup to a new Popup instance.
// The popup will show anytime a popup is called such as when selecting features or displaying a Search result.
view.popup = new Popup();// Set the popup to a PopupOptions object with popup properties set such as the dock options.
// The popup will show anytime a popup is called.
view.popup = {
dockEnabled: true,
dockOptions: {
position: "top-left",
breakpoint: false
}
};// Set the popup to null. This disables the popup so it will never show up.
view.popup = null; popupEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.27 SceneView since 4.0, popupEnabled added at 4.27.
Controls whether the popup opens when users click on the view.
When true, a Popup instance is created and assigned to view.popup the first time the user clicks on the view, unless popup is null. The popup then processes the click event.
When false, the click event is ignored and popup is not created for features but will open for other scenarios that use a popup, such as displaying Search results.
Example
// Disable the popup from automatically appearing and
// open the popup manually using a click event.
view.popupEnabled = false;
view.on("click", (event)=> {
view.openPopup({
// Set properties for the manually opened popup
...
});
}); qualityProfile String
SceneView can draw scenes in three different quality modes: high, medium and low.
qualityProfile is evaluated and set automatically when SceneView loads depending on the detected device, in order to optimize stability and performance across different hardware and browsers. In most scenarios it is therefore recommended to not set qualityProfile, but let it be evaluated automatically. qualityProfile should only be set when the target devices and their capabilities that the application runs on are clear, and are known to work well with the chosen profile. Applications should also consider to provide an option to change the quality profile, such that users can select the profile that works best with their specific devices.
The low quality profile significantly increases performance on slower browsers and devices by reducing the memory limit. 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, simplifying 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. 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 "medium" and "high" quality modes. 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.performanceInfo can be used to inspect the memory consumption and the number of features that are displayed for a specific scene. The SceneView memory resources sample shows how this property can be used.
The default value is based on the detected browser:
low for all browsers on iPhonesmedium for any other browserPossible Values:"low" |"medium" |"high"
Example
let view = new SceneView({
qualityProfile: "high"
});Inherited
Property ready Booleanreadonly
When true, this property indicates whether the view successfully satisfied all dependencies, signaling that the following conditions are met.
0.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
Inherited
Property readyState Stringreadonly
Since: ArcGIS Maps SDK for JavaScript 4.32 View since 4.0, readyState added at 4.32.
Provides more granular information about the view's process of becoming ready. This property helps manage view properties when the view fails to become ready, such as when the basemap fails to load.
The following are the possible expected values and their descriptions:
Value Descriptionloading The view is currently loading information from the map. ready The view is ready. This is similar to the ready property. missing-map The view is missing a map. Set the view's map property. missing-container The view is missing a container. Set the view's container property. empty-map The view's map has no layers. Add layers to the map. rendering-error The view failed to render. This is similar to the fatalError property. map-content-error The view failed to find information from the map and couldn't derive the spatialReference. Verify that the map correctly loaded with the loadError property, as well as its basemap, and the first layer in the map's layers collection. Alternatively, set a valid center, scale, and spatialReference.
Possible Values:"loading" |"missing-map" |"missing-container" |"empty-map" |"map-content-error" |"rendering-error" |"ready"
Examples
// Watch the view's readyState immediately after its initialization.
reactiveUtils.watch(
() => view.readyState,
(state) => {
switch (state) {
case "missing-map":
// Map is missing. Set a default map.
view.map = new Map({ basemap: "streets" });
break;
}
},
{
initial: true // fire the callback immediately after initialization.
}
);const view = new MapView({
container: "viewDiv",
map: new Map({
basemap: {
baseLayers: [
new TileLayer({
url: "my-failing-tiled-service"
})
]
}
});
reactiveUtils.watch(() => view.readyState, (state) => {
switch (state) {
case "map-content-error":
// Defaults to a different map in case of failure
view.map = new Map({ basemap: "streets" });
break;
case "rendering-error":
view.tryFatalErrorRecovery();
break;
default:
console.log("View is not ready:", state);
}
}); resizing Booleanreadonly
Indicates if the view is being resized.
Inherited
Property resolution Numberreadonly
Since: ArcGIS Maps SDK for JavaScript 4.9 View since 4.0, resolution added at 4.9.
Represents the current value of one pixel in the unit of the view's spatialReference. The value of resolution is calculated by dividing the view's extent width by its width.
Represents an approximation of the map scale. Setting the scale immediately changes the current view. For animating the view, see goTo().
When set in the constructor, this property overrides the zoom property. This property will be ignored if the viewpoint, camera, or extent properties are also set in the constructor.
Example
// Set the approximate map scale to 1:24,000
view.scale = 24000;An array containing the width and height of the view in pixels, e.g. [width, height].
The spatial reference of the view.
This indicates the projected or geographic coordinate system used to locate geographic features in the map. In a SceneView the following coordinate systems are available.
The spatial reference can either be set explicitly or automatically derived from the following:
In case the spatial reference is determined from the map layers or the ground layers and they are in WGS84 or Web Mercator, the following rule also applies: the first layer that does not support server side reprojection (tiled layers) determines the spatial reference of the view and all the other layers are reprojected.
If no spatial reference can be derived, then the view does not resolve and the ready property is false.
Inherited
Property stationary Booleanreadonly
Indication whether the view is animating, being navigated with or resizing.
suspended Booleanreadonly
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:
display is set to none (display:none).When the view container's css style visibility is set to hidden, this property is set to false, and the view is hidden but it stills renders and updates data.
Since: ArcGIS Maps SDK for JavaScript 4.28 View since 4.0, theme added at 4.28.
This property specifies the base colors used by some widgets and components to render graphics and labels. This only affects those components that would otherwise use the default orange pattern.
Example
// Update the theme to use purple graphics
// and slightly transparent green text
view.theme = new Theme({
accentColor: "purple",
textColor: [125, 255, 13, 0.9]
});The tiling scheme information of the view.
Since: ArcGIS Maps SDK for JavaScript 4.12 View since 4.0, timeExtent added at 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.
Example
// Create a csv layer from an online spreadsheet.
let csvLayer = new CSVLayer({
url: "http://test.com/daily-magazines-sold-in-new-york.csv",
timeInfo: {
startField: "SaleDate" // The csv field contains date information.
}
});
// Create a mapview showing sales for the last week of March 2019 only.
const view = new MapView({
map: map,
container: "viewDiv",
timeExtent: {
start: new Date("2019, 2, 24"),
end: new Date("2019, 2, 31")
}
}); 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" ];Inherited
Property updating Booleanreadonly
Indicates whether the view is being updated by additional data requests to the network, or by processing received data.
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.
Depending on the viewing mode different supported coordinate systems are available.
Possible Values:"global" |"local"
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().
Since: ArcGIS Maps SDK for JavaScript 4.31 SceneView since 4.0, visibleArea added at 4.31.
The visibleArea represents the visible portion of a map within the view as an instance of a Polygon. The polygon is a 2D approximation of the 3D frustum projected onto the ground surface. This can give more precise results than the view extent, although it is still only an approximation of the 3D visible volume. An example use of the visible area is to spatially filter visible features in a layer view query.
This property does not consider occlusions caused by terrain features (e.g. hills, mountains) or 3D structures (e.g. buildings). Consequently, the visible area may include areas that are actually hidden from the user's view.
The visible area may contain multiple rings, for example the view intersects with the international date line or the poles.
width Numberreadonly
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.
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 thexsmall 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"
Example
reactiveUtils.when(
() => view.widthBreakpoint === "xsmall",
() => {
// clear the view's default UI components if
// the app is used on a mobile device
view.ui.components = [];
}
);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.
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
});Show inherited methods Hide inherited methods
Method DetailsInherited
Method addHandles(handleOrHandles, groupKey)
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, addHandles added at 4.25.
Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.
// Manually manage handles
const handle = reactiveUtils.when(
() => !view.updating,
() => {
wkidSelect.disabled = false;
},
{ once: true }
);
this.addHandles(handle);
// Destroy the object
this.destroy();
Parameters
Handles marked for removal once the object is destroyed.
groupKey *
optionalKey identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.
closePopup()
Since: ArcGIS Maps SDK for JavaScript 4.27 SceneView since 4.0, closePopup added at 4.27.
Closes the popup.
Example
// Closes the popup if it's open
if(view.popup.visible){
view.closePopup();
}Inherited
Method destroy()
Since: ArcGIS Maps SDK for JavaScript 4.17 View since 4.0, destroy added at 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();
Inherited
Method emit(type, event){Boolean}
Since: ArcGIS Maps SDK for JavaScript 4.5 View since 4.0, emit added at 4.5.
Emits an event on the instance. This method should only be used when creating subclasses of this class.
Parameters
The name of the event.
optionalThe event payload.
Returns
Type Description Booleantrue if a listener was notified
goTo(target, options){Promise}
Sets the view to a given target. The target parameter can be one of the following:
[longitude, latitude] pair of coordinatestarget, 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
The target location/viewpoint to go to. When using an object for target, use the properties defined in GoToTarget3D.
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 intarget.
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);
});Inherited
Method hasEventListener(type){Boolean}
Indicates whether there is an event listener on the instance that matches the provided event name.
Returns
Type Description Boolean Returns true if the class supports the input event.Inherited
Method hasHandles(groupKey){Boolean}
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, hasHandles added at 4.25.
Returns true if a named group of handles exist.
Parameter
groupKey *
optionalA group key.
Returns
Type Description Boolean Returnstrue if a named group of handles exist.
Example
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
obj.removeHandles("watch-view-updates");
} hitTest(screenPoint, options){Promise<HitTestResult>}
Returns hit test results from each layer that intersects the specified screen coordinates. The results are organized as an array of objects containing different result types.
The following layer types will return all features if a hit is made on intersecting features: GraphicsLayer, FeatureLayer, SceneLayer, BuildingSceneLayer, PointCloudLayer, CSVLayer, StreamLayer, GeoJSONLayer, OGCFeatureLayer, and SceneView.graphics.
The MediaLayer hit test result contains all media elements if the hit is made on intersecting elements. The RouteLayer hit test result contains all route elements if the hit is made on intersecting elements.
The VoxelLayer hit test result contains information about the intersecting voxel if a hit is made.
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.
Release specific changes:
Known Limitations
Parameters
Specification
The screen coordinates (or native mouse event) of the click on the view.
optionalIntersection test options. By default the map.ground is excluded if its opacity is smaller than one.
Returns
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?.type === "graphic") {
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");
}
});
});Inherited
Method isFulfilled(){Boolean}
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).Inherited
Method isRejected(){Boolean}
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.Inherited
Method isResolved(){Boolean}
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.Inherited
Method on(type, modifiersOrHandler, handler){Object}
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.
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.
The function to call when the event is fired, if modifiers were specified.
Returns
Type Description Object Returns an event handler with aremove() 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);
}); openPopup(options){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.27 SceneView since 4.0, openPopup added at 4.27.
Opens the popup at the given location with content defined either explicitly with content or driven from the PopupTemplate of input features. This method sets the popup's visible property to true. Users can alternatively open the popup by directly setting the visible property to true.
A Popup instance is created and assigned to popup the first time openPopup() is called, unless popup is null. The popup then processes the click event.
When calling this method, to prevent the popup from opening when clicking on the view, set popupEnabled to false to stop event propagation on the view.
The popup will only display if the view's size constraints in dockOptions are met or the location property is set to a geometry.
Parameters
Specification
optionalDefines the location and content of the popup when opened.
Specification
optionalSets the title of the popup.
optionalSets the content of the popup.
optionalSets the popup's location, which is the geometry used to position the popup.
optionalDefault Value: false
When true, indicates the popup should fetch the content of this feature and display it. If no PopupTemplate exists, a default template is created for the layer if defaultPopupTemplateEnabled = true. In order for this option to work, there must be a valid view and location set.
Sets the popup's features, which populate the title and content of the popup based on each graphic's PopupTemplate.
optionalSets pending promises on the popup. The popup will display once the promises resolve. Each promise must resolve to an array of Graphics.
optionalDefault Value: false
This property enables multiple features in a popup to display in a list rather than displaying the first selected feature. Setting this to true allows the user to scroll through the list of features returned from the query and choose the selection they want to display within the popup.
Default Value: false
When true, indicates the popup should update its location for each paginated feature based on the selectedFeature's geometry.
Default Value: false
When true, indicates that only the popup header will display.
Default Value: false
When true, indicates that the focus should be on the popup after it has been opened.
Returns
Type Description Promise Resolves when the popup is opened. CallingopenPopup() or closePopup() again rejects the Promise.
Examples
// Opens a popup manually depending on where the user clicks with specified title and content.
view.on("click", (event)=>{
view.openPopup({
location: event.mapPoint,
title: "You clicked here",
content: "This is a point of interest"
});
});// Opens popup at the location of the click event and displays
// content for the selected features if a popupTemplate is defined.
view.on("click", (event)=>{
view.openPopup({
location: event.mapPoint,
fetchFeatures: true
});
});// Opens popup with the properties specified at the location of the click event
// and updates the popup location based on the selected feature's geometry.
view.openPopup({
title: "You clicked here",
content: "This is a point of interest",
location: event.mapPoint,
updateLocationEnabled: true
});// Opens popup with the specified array of graphics and displays the
// features in a list (feature menu) at the location of the first graphic in the array.
view.openPopup({
features: graphics,
featureMenuOpen: true,
location: graphics[0].geometry
});Inherited
Method removeHandles(groupKey)
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, removeHandles added at 4.25.
Removes a group of handles owned by the object.
Parameter
groupKey *
optionalA group key or an array or collection of group keys to remove.
Example
obj.removeHandles(); // removes handles from default group
obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group"); takeScreenshot(options){Promise<Screenshot>}
Since: ArcGIS Maps SDK for JavaScript 4.9 SceneView since 4.0, takeScreenshot added at 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
optionalScreenshot options.
Specification
optionalDefault Value: png
The format of the resulting encoded data url.
Possible Values:"jpg"|"png"
optionalDefault Value: 98
The quality (0 to 100) of the encoded image when format is jpg.
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.
optionalThe 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.
optionalSpecifies 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
The x coordinate of the area.
The y coordinate of the area.
The width of the area.
The height of the area.
optionalIndicates 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.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 });Converts the given screen point to a map point.
Known Limitations
Returns
Type Description Point | null | undefined The map point corresponding to the given screen point.Converts the given map point to a screen point.
Returns
Type Description ScreenPoint The screen point corresponding to the given map point.Inherited
Method tryFatalErrorRecovery()
Since: ArcGIS Maps SDK for JavaScript 4.12 View since 4.0, tryFatalErrorRecovery added at 4.12.
Call this method to clear any fatal errors resulting from a lost WebGL context.
Example
reactiveUtils.when(
() => view.fatalError,
() => view.tryFatalErrorRecovery()
);Inherited
Method when(callback, errback){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.6 View since 4.0, when added at 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
optionalThe function to call when the promise resolves.
optionalThe function to execute when the promise fails.
Returns
Type Description Promise Returns a new promise for the result ofcallback 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
});Gets the analysis view created for the given analysis object. The returned promise resolves when the view for the given analysis has been created, or rejects with an error (for example if the analysis is not part of analyses.
Parameter
The analysis for which to obtain the analysis view.
Returns
Type Description Promise<AnalysisViewUnion> Resolves to an instance of the analysis view for the provided analysis.Example
// Create a slice analysis
let analysis = new SliceAnalysis();
// add to the sceneview
view.analyses.add(analysis);
view.whenAnalysisView(analysis)
.then(function(analysisView) {
// The analysis view for the analysis
})
.catch(function(error) {
// An error occurred during the analysis view creation
});Inherited
Method whenLayerView(layer){Promise<LayerView>}
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
The layer for which to obtain its LayerView.
Returns
Type Description Promise<LayerView> Resolves to an instance of LayerView for the specified layer.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
}); 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
The input time (from 0 to 1)
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 1Example
// 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.
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.
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.
optionalSet 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 and maxDuration options.
optionalDefault Value:8000
The maximum allowed duration (in milliseconds) of the animation. The default maxDuration value takes the specified speedFactor into account.
optionalThe 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, cubic-in, cubic-out, cubic-in-out, expo-in, expo-out, expo-in-out, quad-in-out-coast, ease-in, ease-out, ease-in-out, as well as in-cubic, out-cubic, in-out-cubic, in-expo, out-expo, in-out-expo, and in-out-coast-quad. See easing functions and CSS easing functions for graphical representations of these functions.
By default, animations that are less than 1000 ms use the expo-out easing function; longer animations use the quad-in-out-coast easing function.
The following prenamed easing functions have been deprecated since version 4.33: in-cubic, out-cubic, in-out-cubic, in-expo, out-expo, in-out-expo, and in-out-coast-quad. Please use cubic-in, cubic-out, cubic-in-out, expo-in, expo-out, expo-in-out, and quad-in-out-coast instead.
Possible Values:"linear"|"cubic-in"|"cubic-out"|"cubic-in-out"|"expo-in"|"expo-out"|"expo-in-out"|"quad-in-out-coast"|"in-cubic"|"out-cubic"|"in-out-cubic"|"in-expo"|"out-expo"|"in-out-expo"|"in-out-coast-quad"|"ease"|"ease-in"|"ease-out"|"ease-in-out"
optionalAn 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.
GraphicHit Object
Since: ArcGIS Maps SDK for JavaScript 4.24 SceneView since 4.0, GraphicHit added at 4.24.
Object specification for the graphic hit result returned in HitTestResult of the hitTest() method. 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 property in this object.
The value is always "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: VoxelLayer). 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.
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.
The layer that contains the feature/graphic.
The point geometry in the spatial reference of the view corresponding with the input screen coordinates.
HitTestResult Object
Since: ArcGIS Maps SDK for JavaScript 4.24 SceneView since 4.0, HitTestResult added at 4.24.
Object specification for the result of the hitTest() method.
An array of result objects returned from the hitTest() when the location of the input screen coordinates intersect features in the view.
Ground intersection result. The ground hit result will always be returned, even if the ground was excluded from the hitTest.
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).
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.
The screen coordinates (or native mouse event) of the click on the view.
MediaHit Object
Since: ArcGIS Maps SDK for JavaScript 4.24 SceneView since 4.0, MediaHit added at 4.24.
Object specification for the media hit results returned from MediaLayer in HitTestResult of the hitTest() method. See the table below for the specification of each property in this object.
The value is always "media".
An element representing a media element in MediaLayer.source that intersects the input screen coordinates.
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.
The media layer that contains the element.
The point geometry in the spatial reference of the view corresponding with the input screen coordinates.
Since 4.28 An object representing a point on the element. The origin (0, 0) corresponds to the top-left corner of the element.
RouteHit Object
Since: ArcGIS Maps SDK for JavaScript 4.24 SceneView since 4.0, RouteHit added at 4.24.
Object specification for the route hit results returned from RouteLayer in HitTestResult of the hitTest() method. See the table below for the specification of each property in this object.
The value is always "route".
The route layer that contains the element.
The point geometry in the spatial reference of the view corresponding with the input screen coordinates.
The route hit test will contain all intersecting network elements which, includes one of the following: DirectionLine, DirectionPoint, PointBarrier, PolylineBarrier, PolygonBarrier, Stop, or RouteInfo.
ScreenPoint
Since: ArcGIS Maps SDK for JavaScript 4.11 SceneView since 4.0, ScreenPoint added at 4.11.
An object representing a point on the screen.
Screenshot
Since: ArcGIS Maps SDK for JavaScript 4.9 SceneView since 4.0, Screenshot added at 4.9.
Object returned when takeScreenshot() promise resolves:
A data url representing the screenshot.
The raw RGBA image data.
Since: ArcGIS Maps SDK for JavaScript 4.24 SceneView since 4.0, ViewHit added at 4.24.
Object specification for the result returned in HitTestResult of the hitTest() method.
Show inherited events Hide inherited events
Name Type Summary Class analysis-view-create {analysis: AnalysisUnion,analysisView: AnalysisViewUnion}Fires when the view for an analysis is created.
View analysis-view-create-error {analysis: AnalysisUnion,error: Error}Fires when an error occurs during the creation of an analysis after an analysis is added to the view.
View analysis-view-destroy {analysis: AnalysisUnion,analysisView: AnalysisViewUnion}Fires after an analysis view is destroyed.
View blur {target: View,native: Object,defer: EventDefer}Fires when browser focus is moved away from the view.
View click {mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0|1|2,type: "click",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a user clicks on the view.
View double-click {mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0|1|2,type: "double-click",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after double-clicking on the view.
View drag {action: "start"|"added"|"update"|"removed"|"end",x: Number,y: Number,origin: Object,origin.x: Number,origin.y: Number,button: 0|1|2,buttons: Number,type: "drag",radius: Number,angle: Number,stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires during a pointer drag on the view.
View focus {target: View,native: Object,defer: EventDefer}Fires when browser focus is on the view.
View hold {mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "hold",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after holding either a mouse button or a single finger on the view for a short amount of time.
View immediate-click {mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "immediate-click",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires right after a user clicks on the view.
View immediate-double-click {mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "immediate-double-click",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Is emitted after two consecutive immediate-click events.
View key-down {repeat: Boolean,key: String,type: "key-down",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a keyboard key is pressed.
View key-up {type: "key-up",key: String,stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a keyboard key is released.
View layerview-create {layer: Layer,layerView: LayerView}Fires after each layer in the map has a corresponding LayerView created and rendered in the view.
View layerview-create-error {layer: Layer,error: Error}Fires when an error occurs during the creation of a LayerView after a layer has been added to the map.
View layerview-destroy {layer: Layer,layerView: LayerView}Fires after a LayerView is destroyed and is no longer rendered in the view.
View mouse-wheel {x: Number,y: Number,deltaY: Number,type: "mouse-wheel",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view.
View pointer-down {pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-down",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a mouse button is pressed, or a finger touches the display.
View pointer-enter {pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-enter",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a mouse cursor enters the view, or a display touch begins.
View pointer-leave {pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-leave",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a mouse cursor leaves the view, or a display touch ends.
View pointer-move {pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-move",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after the mouse or a finger on the display moves.
View pointer-up {pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-up",stopPropagation: Function,timestamp: Number,native: Object,defer: EventDefer}Fires after a mouse button is released, or a display touch ends.
View resize {oldWidth: Number,oldHeight: Number,width: Number,height: Number}Fires when the view's size changes.
View Event DetailsInherited
Event analysis-view-create
Fires when the view for an analysis is created.
Inherited
Event analysis-view-create-error
Fires when an error occurs during the creation of an analysis after an analysis is added to the view.
The analysis for which the analysisView was created.
An error object describing why the analysis view could not be created.
Inherited
Event analysis-view-destroy
Fires after an analysis view is destroyed.
Inherited
Event blur
Since: ArcGIS Maps SDK for JavaScript 4.7 View since 4.0, blur added at 4.7.
Fires when browser focus is moved away from the view.
The view that the browser focus is moved away from.
A standard DOM KeyboardEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event click
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.
The point location of the click on the view in the spatial reference of the map.
x NumberThe horizontal screen coordinate of the click on the view.
y NumberThe vertical screen coordinate of the click on the view.
button NumberIndicates which mouse button was clicked.
buttons NumberIndicates the current mouse button state.
Value Description 0 left click (or touch) 1 middle click 2 right click type StringThe event type.
The value is always "click".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM PointerEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
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.popupEnabled = 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
});
});Inherited
Event double-click
Fires after double-clicking on the view.
The point location of the click on the view in the spatial reference of the map.
x NumberThe horizontal screen coordinate of the click on the view.
y NumberThe vertical screen coordinate of the click on the view.
button NumberIndicates which mouse button was clicked.
buttons NumberIndicates the current mouse button state.
Value Description 0 left click (or touch) 1 middle click 2 right click type StringThe event type.
The value is always "double-click".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM PointerEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
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);
});Inherited
Event drag
Fires during a pointer drag on the view.
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 NumberThe horizontal screen coordinate of the pointer on the view.
y NumberThe vertical screen coordinate of the pointer on the view.
origin ObjectScreen coordinates of the start of the drag.
The horizontal screen coordinate of the pointer on the view.
y NumberThe vertical screen coordinate of the pointer on the view.
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 buttons NumberIndicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "drag".
radius NumberThe radius of a sphere around the multiple pointers involved in this drag. Or 0 while only a single pointer is used.
angle NumberAmount of rotation (in degrees) since the last event of type start.
Prevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM MouseEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Example
view.on("drag", function(event){
// Print out the current state of the
// drag event.
console.log("drag state", event.action);
});Inherited
Event focus
Since: ArcGIS Maps SDK for JavaScript 4.7 View since 4.0, focus added at 4.7.
Fires when browser focus is on the view.
The view that the browser focus is currently on.
A standard DOM KeyboardEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event hold
Fires after holding either a mouse button or a single finger on the view for a short amount of time.
The point location of the click on the view in the spatial reference of the map.
x NumberThe horizontal screen coordinate of the hold on the view.
y NumberThe vertical screen coordinate of the hold on the view.
button NumberIndicates 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 buttons NumberIndicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "hold".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM PointerEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
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);
});Inherited
Event immediate-click
Since: ArcGIS Maps SDK for JavaScript 4.7 View since 4.0, immediate-click added at 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.
The point location of the click on the view in the spatial reference of the map.
x NumberThe horizontal screen coordinate of the click on the view.
y NumberThe vertical screen coordinate of the click on the view.
button NumberIndicates which mouse button was clicked. See MouseEvent.button.
Value Description 0 left click (or touch) 1 middle click 2 right click buttons NumberIndicates which buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "immediate-click".
stopPropagation FunctionPrevents the event bubbling up the event chain. Inhibits the associated click and double-click events.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM PointerEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
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);
});Inherited
Event immediate-double-click
Since: ArcGIS Maps SDK for JavaScript 4.15 View since 4.0, immediate-double-click added at 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.
The point location of the click on the view in the spatial reference of the map.
x NumberThe horizontal screen coordinate of the click on the view.
y NumberThe vertical screen coordinate of the click on the view.
button NumberIndicates which mouse button was clicked. See MouseEvent.button.
Value Description 0 left click (or touch) 1 middle click 2 right click buttons NumberIndicates which buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "immediate-double-click".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM PointerEvent.
defer EventDeferA function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event key-down
Fires after a keyboard key is pressed.
Indicates whether this is the first event emitted due to the key press, or a repeat.
The key value that was pressed, according to the MDN full list of key values.
The event type.
The value is always "key-down".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was emitted.
A standard DOM KeyboardEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
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
});
}
});Inherited
Event key-up
Fires after a keyboard key is released.
The event type.
The value is always "key-up".
The key value that was released, according to the MDN full list of key values.
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was emitted.
A standard DOM KeyboardEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event layerview-create
Fires after each layer in the map has a corresponding LayerView created and rendered in the view.
The layer in the map for which the layerView was created.
The LayerView rendered in the view representing the layer in layer.
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);
}
});Inherited
Event layerview-create-error
Fires when an error occurs during the creation of a LayerView after a layer has been added to the map.
The layer in the map for which the view emitting this event failed to create a layer view.
An error object describing why the layer view could not be created.
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);
});Inherited
Event layerview-destroy
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.
The layer in the map for which the layerView was destroyed.
The LayerView that was destroyed in the view.
Inherited
Event mouse-wheel
Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view.
The horizontal screen coordinate of the click on the view.
The vertical screen coordinate of the click on the view.
Number representing the vertical scroll amount.
The event type.
The value is always "mouse-wheel".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was emitted.
A standard DOM WheelEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
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);
});Inherited
Event pointer-down
Fires after a mouse button is pressed, or a finger touches the display.
Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.
Indicates the pointer type.
Possible Values:"mouse"|"touch"
The horizontal screen coordinate of the pointer on the view.
The vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked.
Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
The event type.
The value is always "pointer-down".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was emitted.
A standard DOM PointerEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event pointer-enter
Fires after a mouse cursor enters the view, or a display touch begins.
Uniquely identifies a pointer between multiple events. Ids might get reused after a pointer-up event.
Indicates the pointer type.
Possible Values:"mouse"|"touch"
The horizontal screen coordinate of the pointer on the view.
The vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked.
Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
The event type.
The value is always "pointer-enter".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was created.
A standard DOM PointerEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event pointer-leave
Fires after a mouse cursor leaves the view, or a display touch ends.
Uniquely identifies a pointer between multiple events. Ids might get reused after a pointer-up event.
Indicates the pointer type.
Possible Values:"mouse"|"touch"
The horizontal screen coordinate of the pointer on the view.
The vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked.
Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
The event type.
The value is always "pointer-leave".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was created.
A standard DOM PointerEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event pointer-move
Fires after the mouse or a finger on the display moves.
Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.
Indicates the pointer type.
Possible Values:"mouse"|"touch"
The horizontal screen coordinate of the pointer on the view.
The vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked.
Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
The event type.
The value is always "pointer-move".
Prevents the event bubbling up the event chain.
Time stamp (in milliseconds) at which the event was created.
A standard DOM PointerEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
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);
});Inherited
Event pointer-up
Fires after a mouse button is released, or a display touch ends.
Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.
Indicates the pointer type.
Possible Values:"mouse"|"touch"
The horizontal screen coordinate of the pointer on the view.
The vertical screen coordinate of the pointer on the view.
Indicates which mouse button was clicked.
Indicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
The event type.
The value is always "pointer-up".
Prevents the event bubbling up the event chain. Inhibits the associated immediate-click, click and double-click events.
Time stamp (in milliseconds) at which the event was created.
A standard DOM PointerEvent.
A function that can be called to defer event propagation until the passed in asynchronous function is completed. Calling defer will stall the entire event pipeline and should be used with caution.
Inherited
Event resize
Fires when the view's size changes.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4