A view provides the means of viewing and interacting with the components of a Map. The Map is merely a container, storing the geographic information contained in base layers and operational layers. The View renders the Map and its various layers, making them visible to the user.
There are two types of views: MapView and SceneView. The MapView renders a Map and its layers in 2D. The SceneView renders these elements in 3D. View is the base class of MapView and SceneView and has no constructor. To create a view, you must do so by directly creating an instance of either MapView or SceneView.
MapView (2D) | SceneView (3D) |
---|---|
![]() |
![]() |
To associate a view with a map, you must set the map property to an instance of Map.
// Load the Map and MapView modules
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
// Create a Map instance
let map = new Map({
basemap: "topo-vector"
});
// Create a MapView instance (for 2D viewing) and set its map property to
// the map instance we just created
let view = new MapView({
map: map,
container: "viewDiv"
});
});
In the snippet above, you'll notice a container
property set on the view. The container
property is the reference to the DOM node that contains the view. This is commonly a <div>
element. The container
referenced in the example above might look something like:
<body>
<div id="viewDiv"></div>
</body>
You can observe the view's relationship to the HTML container in the Create a 2D map tutorial and any of the available samples.
Other properties may be set on the view, such as the rotation, scale, popup, and padding. See MapView and SceneView for additional properties specific to creating views in 2D and 3D.
A Map may have multiple views associated with it, including a combination of MapViews and SceneViews. See the Geodesic buffers and 2D overview map in SceneView samples to learn how a MapView and a SceneView can display the same map in a single application. While multiple views can reference the same map, a view may not associate itself with more than one Map instance.
The View also allows users to interact with components of the map. For example, when a user clicks or touches the location of a
feature in a map, they are not touching the feature nor the map; the event is actually handled with the View that references the map and
the LayerView that references the layer. Therefore, events such as click
are not
handled on the Map or the Layer, but rather on the View. See MapView and
SceneView for additional details.
Property Overview
Name | Type | Summary | Class |
---|---|---|---|
Collection<LayerView> | Collection containing a flat list of all the created LayerViews related to the basemap, operational layers, and group layers in this view. more details | View | |
ViewAnimation | Represents an ongoing view animation initialized by goTo(). more details | View | |
BasemapView | Represents the view for a single basemap after it has been added to the map. more details | View | |
HTMLDivElement | The | View | |
String | The name of the class. more details | Accessor | |
Error | A fatal error returned when the view loses its WebGL context. more details | View | |
Boolean | Indicates if the browser focus is on the view. more details | View | |
Collection<Graphic> | Allows for adding graphics directly to the default graphics in the View. more details | View | |
Number | The height of the view in pixels read from the view container element. more details | View | |
Input | Options to configure input handling of the View. more details | View | |
Boolean | Indication whether the view is being interacted with (for example when panning or by an interactive tool). more details | View | |
Collection<LayerView> | A collection containing a hierarchical list of all the created LayerViews of the operational layers in the map. more details | View | |
Magnifier | The magnifier allows for showing a portion of the view as a magnifier image on top of the view. more details | View | |
Map | An instance of a Map object to display in the view. more details | View | |
Boolean | Indication whether the view is being navigated (for example when panning). more details | View | |
Navigation | Options to configure the navigation behavior of the View. more details | View | |
Object | Use the padding property to make the center, and extent, etc. more details | View | |
Popup | A Popup object that displays general content or attributes from layers in the map. more details | View | |
Boolean | Controls whether the popup opens when users click on the view. more details | View | |
Boolean | When | View | |
Boolean | Indicates if the view is being resized. more details | View | |
Number | Represents the current value of one pixel in the unit of the view's spatialReference. more details | View | |
Number[] | An array containing the width and height of the view in pixels, e.g. more details | View | |
SpatialReference | The spatial reference of the view. more details | View | |
Boolean | Indication whether the view is animating, being navigated with or resizing. more details | View | |
Boolean | Indicates if the view is visible on the page. more details | View | |
TimeExtent | The view's time extent. more details | View | |
String | The type of the view is either | View | |
DefaultUI | Exposes the default widgets available in the view and allows you to toggle them on and off. more details | View | |
Boolean | Indicates whether the view is being updated by additional data requests to the network, or by processing received data. more details | View | |
Collection<View> | Contains the collection of active views on the page. more details | View | |
Number | The width of the view in pixels read from the view container element. more details | View |
Property Details
-
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.
- See also
-
animation ViewAnimation
-
Represents an ongoing view animation initialized by goTo(). You may watch this property to be notified when the view's extent changes .
- See also
-
basemapView BasemapView
-
Represents the view for a single basemap after it has been added to the map.
-
container HTMLDivElementautocastAutocasts from String
-
The
id
or node representing the DOM element containing the view. This is typically set in the view's constructor.Examples// Sets container to the DOM id let view = new MapView({ container: "viewDiv" // ID of the HTML element that holds the view });
// Sets container to the node let viewNode = document.getElementById("viewDiv"); let view = new SceneView({ container: viewNode });
-
Since: ArcGIS Maps SDK for JavaScript 4.7
-
The name of the class. The declared class name is formatted as
esri.folder.className
.
-
fatalError ErrorSince: ArcGIS Maps SDK for JavaScript 4.12
-
A fatal error returned when the view loses its WebGL context. Watch this property to properly handle the error and attempt to recover the WebGL context.
- See also
Exampleview.watch("fatalError", function(error) { if(error) { console.error("Fatal Error! View has lost its WebGL context. Attempting to recover..."); view.tryFatalErrorRecovery(); } });
-
focused BooleanreadonlySince: ArcGIS Maps SDK for JavaScript 4.7
-
Indicates if the browser focus is on the view.
-
graphics Collection<Graphic>
-
Allows for adding graphics directly to the default graphics in the View.
- See also
Examples// Adds a graphic to the View view.graphics.add(pointGraphic);
// Removes a graphic from the View view.graphics.remove(pointGraphic);
-
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.
- Default Value:0
-
input InputreadonlySince: ArcGIS Maps SDK for JavaScript 4.9
-
Options to configure input handling of the View.
Example// Make gamepad events to emit independently of focus. view.input.gamepad.enabledFocusMode = "none";
-
interacting Booleanreadonly
-
Indication whether the view is being interacted with (for example when panning or by an interactive tool).
- Default Value:false
-
layerViews Collection<LayerView>
-
A collection containing a hierarchical list of all the created LayerViews of the operational layers in the map.
- See also
-
magnifier MagnifierreadonlySince: ArcGIS Maps SDK for JavaScript 4.19
-
The magnifier allows for showing a portion of the view as a magnifier image on top of the view.
-
An instance of a Map object to display in the view. A view may only display one map at a time. On the other hand, one Map may be viewed by multiple MapViews and/or SceneViews simultaneously.
This property is typically set in the constructor of the MapView or SceneView. See the class description for examples demonstrating the relationship between the map and the view.
-
-
Indication whether the view is being navigated (for example when panning).
- Default Value:false
-
Since: ArcGIS Maps SDK for JavaScript 4.9
-
Options to configure the navigation behavior of the View.
Example// Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming. const view = new MapView({ container: "viewDiv", map: new Map({ basemap: "satellite" }), center: [176.185, -37.643], zoom: 13, navigation: { gamepad: { enabled: false }, browserTouchPanEnabled: false, momentumEnabled: false, mouseWheelZoomEnabled: false } });
-
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.
-
popup Popup
-
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 istrue
, when the view.openPopup() method is called, or when some widgets need the popup, such as Search. If popup isnull
, the popup instance will not be created.- See also
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 BooleanSince: ArcGIS Maps SDK for JavaScript 4.27
-
Controls whether the popup opens when users click on the view.
When
true
, a Popup instance is created and assigned to view.popup the first time the user clicks on the view, unless popup isnull
. 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 ... }); });
-
ready Booleanreadonly
-
When
true
, this property indicates whether the view successfully satisfied all dependencies, signaling that the following conditions are met.- The view has a map. If map is a WebMap or a WebScene, then the map or scene must be loaded.
- The view has a container with a size greater than
0
. - The view has a spatialReference, a center, and a scale. These also can be inferred by setting an extent.
When a view becomes ready it will resolve itself and invoke the callback defined in when() where code can execute on a working view. Subsequent changes to a view's readiness would typically be handled by watching
view.ready
and providing logic for cases where the map or container change.- Default Value:false
- See also
-
resizing Booleanreadonly
-
Indicates if the view is being resized.
- Default Value:false
-
resolution NumberreadonlySince: ArcGIS Maps SDK for JavaScript 4.9
-
Represents the current value of one pixel in the unit of the view's spatialReference. The value of resolution is calculated by dividing the view's extent width by its width.
-
An array containing the width and height of the view in pixels, e.g.
[width, height]
.
-
spatialReference SpatialReferenceautocast
-
The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map.
- Default Value:null
-
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 totrue
when one of the following conditions are met:- if the view does not have a container,
- if the view's height or width equal to 0,
- if the view container's css style
display
is set tonone
(display:none
).
When the view container's css style
visibility
is set tohidden
, this property is set tofalse
, and the view is hidden but it stills renders and updates data.- Default Value:true
-
timeExtent TimeExtentautocastSince: ArcGIS Maps SDK for JavaScript 4.12
-
The view's time extent. Time-aware layers display their temporal data that falls within the view's time extent. Setting the view's time extent is similar to setting the spatial extent because once the time extent is set, the view updates automatically to conform to the change.
- Default Value:null
Example// Create a csv layer from an online spreadsheet. let csvLayer = new CSVLayer({ url: "http://test.com/daily-magazines-sold-in-new-york.csv", timeInfo: { startField: "SaleDate" // The csv field contains date information. } }); // Create a mapview showing sales for the last week of March 2019 only. let view = new MapView({ map: map, container: "viewDiv", timeExtent: { start: new Date("2019, 2, 24"), end: new Date("2019, 2, 31") } });
-
type Stringreadonly
-
-
Exposes the default widgets available in the view and allows you to toggle them on and off. See DefaultUI for more details.
Exampleslet toggle = new BasemapToggle({ view: view, nextBasemap: "hybrid" }); // Adds an instance of BasemapToggle widget to the // top right of the view. view.ui.add(toggle, "top-right");
// Moves the zoom and BasemapToggle widgets to the // bottom left of the view. view.ui.move([ "zoom", toggle ], "bottom-left");
// Removes all the widgets from the bottom left of the view view.ui.empty("bottom-left");
// Removes the compass widget from the view view.ui.remove("compass");
// Removes all default UI components, except Attribution. // Passing an empty array will remove all components. view.ui.components = [ "attribution" ];
-
updating Booleanreadonly
-
Indicates whether the view is being updated by additional data requests to the network, or by processing received data.
- Default Value:false
-
views Collection<View>static,readonlySince: ArcGIS Maps SDK for JavaScript 4.11
-
Contains the collection of active views on the page. Only views that are ready appear in the collection.
-
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.
- Default Value:0
Method Overview
Name | Return Type | Summary | Class |
---|---|---|---|
Adds one or more handles which are to be tied to the lifecycle of the object. more details | Accessor | ||
Closes the popup. more details | View | ||
Destroys the view, and any associated resources, including its map, popup, and UI elements. more details | View | ||
Boolean | Emits an event on the instance. more details | View | |
Sets the focus on the view. more details | View | ||
Boolean | Indicates whether there is an event listener on the instance that matches the provided event name. more details | View | |
Boolean | Returns true if a named group of handles exist. more details | Accessor | |
Boolean |
| View | |
Boolean |
| View | |
Boolean |
| View | |
Object | Registers an event handler on the instance. more details | View | |
Promise | Opens the popup at the given location with content defined either explicitly with | View | |
Removes a group of handles owned by the object. more details | Accessor | ||
Call this method to clear any fatal errors resulting from a lost WebGL context. more details | View | ||
Promise |
| View | |
Promise<LayerView> | Gets the LayerView created on the view for the given layer. more details | View |
Method Details
-
addHandles(handleOrHandles, groupKey)inheritedSince: ArcGIS Maps SDK for JavaScript 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();
ParametershandleOrHandles WatchHandle|WatchHandle[]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
-
Closes the popup.
Example// Closes the popup if it's open if(view.popup.visible){ view.closePopup(); }
-
destroy()Since: ArcGIS Maps SDK for JavaScript 4.17
-
Destroys the view, and any associated resources, including its map, popup, and UI elements. These can no longer be used once the view has been destroyed. To prevent these components from being destroyed, remove them from the view before calling
destroy()
.// remove popup and legend from the view so that they are not destroyed const popup = view.popup; view.popup = null; view.ui.remove(legend); // unset map from the view so that it is not destroyed const map = view.map; view.map = null; // destroy the view and any remaining associated resources view.destroy();
-
emit(type, event){Boolean}Since: ArcGIS Maps SDK for JavaScript 4.5
-
Emits an event on the instance. This method should only be used when creating subclasses of this class.
Parameterstype StringThe name of the event.
event ObjectoptionalThe event payload.
ReturnsType Description Boolean true
if a listener was notified
-
focus()Since: ArcGIS Maps SDK for JavaScript 4.5
-
Sets the focus on the view.
-
hasEventListener(type){Boolean}
-
Indicates whether there is an event listener on the instance that matches the provided event name.
Parametertype StringThe name of the event.
ReturnsType Description Boolean Returns true if the class supports the input event.
-
Since: ArcGIS Maps SDK for JavaScript 4.25
-
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType Description Boolean Returns true
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"); }
-
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.ReturnsType Description Boolean Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).
-
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.ReturnsType Description Boolean Indicates whether creating an instance of the class has been rejected.
-
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.ReturnsType Description Boolean Indicates whether creating an instance of the class has been resolved.
-
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.
ParametersThe 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
.handler FunctionoptionalThe function to call when the event is fired, if modifiers were specified.
ReturnsType Description Object Returns an event handler with a remove()
method that can be called to stop listening for the event.Property Type Description remove Function When called, removes the listener from the event. Exampleview.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
-
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 totrue
. Users can alternatively open the popup by directly setting the visible property totrue
.A esri/widget/Popup instance is created and assigned to popup the first time
openPopup()
is called, unless popup isnull
. The popup then processes the click event.The popup will only display if the view's size constraints in dockOptions are met or the location property is set to a geometry.
ParametersSpecificationoptions ObjectoptionalDefines the location and content of the popup when opened.
Specificationtitle StringoptionalSets the title of the popup.
content String|HTMLElement|WidgetoptionalSets the content of the popup.
location GeometryoptionalSets the popup's location, which is the geometry used to position the popup.
fetchFeatures BooleanoptionalDefault Value: falseWhen
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 validview
andlocation
set.optional Sets the popup's features, which populate the title and content of the popup based on each graphic's PopupTemplate.
optional Sets pending promises on the popup. The popup will display once the promises resolve. Each promise must resolve to an array of Graphics.
featureMenuOpen BooleanoptionalDefault Value: falseThis 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.updateLocationEnabled BooleanoptionalDefault Value: falseWhen
true
, indicates the popup should update its location for each paginated feature based on the selectedFeature's geometry.collapsed BooleanoptionalDefault Value: falseWhen
true
, indicates that only the popup header will display.shouldFocus BooleanoptionalDefault Value: falseWhen
true
, indicates that the focus should be on the popup after it has been opened.ReturnsType Description Promise Resolves when the popup is opened. Calling openPopup()
orclosePopup()
again rejects the Promise.- See also
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 });
-
removeHandles(groupKey)inheritedSince: ArcGIS Maps SDK for JavaScript 4.25
-
Removes a group of handles owned by the object.
ParametergroupKey *optionalA group key or an array or collection of group keys to remove.
Exampleobj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");
-
tryFatalErrorRecovery()Since: ArcGIS Maps SDK for JavaScript 4.12
-
Call this method to clear any fatal errors resulting from a lost WebGL context.
- See also
Exampleview.watch("fatalError", function(error) { if(error) { view.tryFatalErrorRecovery(); } });
-
when(callback, errback){Promise}Since: ArcGIS Maps SDK for JavaScript 4.6
-
when()
may be leveraged once an instance of the class is created. This method takes two input parameters: acallback
function and anerrback
function. Thecallback
executes when the instance of the class loads. Theerrback
executes if the instance of the class fails to load.Parameterscallback FunctionoptionalThe function to call when the promise resolves.
errback FunctionoptionalThe function to execute when the promise fails.
ReturnsType Description Promise Returns a new promise for the result of callback
that may be used to chain additional functions.Example// Although this example uses MapView, any class instance that is a promise may use when() in the same way let view = new MapView(); view.when(function(){ // This function will execute once the promise is resolved }, function(error){ // This function will execute if the promise is rejected due to an error });
-
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).
Parameterlayer LayerThe layer for which to obtain its LayerView.
ReturnsType Description Promise<LayerView> Resolves to an instance of LayerView for the specified layer. - See also
Example// Create a feature layer from a url pointing to a Feature Service let layer = new FeatureLayer(url); map.add(layer); view.whenLayerView(layer) .then(function(layerView) { // The layerview for the layer }) .catch(function(error) { // An error occurred during the layerview creation });
Type Definitions
-
Since: ArcGIS Maps SDK for JavaScript 4.26
-
Options for configuring the highlight on MapView, SceneView or on layer views. Use the
highlight()
method on the appropriate LayerView to highlight a feature. ThelayerView.highlightOptions
will take precedence overview.highlightOptions
if both properties are set.Notes
With version 4.19, highlighting a feature in 3D SceneView influences the shadow of the feature as well. By default, the shadow of the highlighted feature is displayed in a darker shade.
- Properties
-
color ColorDefault Value:#00ffff
The color of the highlight fill.
haloColor ColorDefault Value:nullThe color of the halo surrounding the highlight. If no
haloColor
is provided, then the halo will be colored with the specifiedcolor
.haloOpacity NumberDefault Value:1The opacity of the highlight halo. This will be multiplied with any opacity specified in
color
.fillOpacity NumberDefault Value:0.25The opacity of the fill (area within the halo). This will be multiplied with the opacity specified in
color
.shadowColor ColorDefault Value:#000000The color of the highlighted feature's shadow in 3D SceneView.
shadowOpacity NumberDefault Value:0.4The opacity of the highlighted feature's shadow. This will be multiplied with the opacity specified in
shadowColor
3D SceneView.shadowDifference NumberDefault Value:0.375Defines the intensity of the shadow area obtained by overlapping the shadow of the highlighted feature and the shadow of other objects in 3D SceneView. The value ranges from
0
to1
. A value of0
highlights the overlapping shadow areas in the same way (no difference). Setting it to1
highlights only the difference between the shadow areas, so the overlapping shadow areas aren't highlighted at all. Here is an example of what the shadow highlight looks like with different values: - See also
Examples// MapView.highlightOptions will be used on any layerview that // does not have highlightOptions set const view = new MapView({ map: map, highlightOptions: { color: [255, 255, 0, 1], // bright yellow haloOpacity: 0.9, fillOpacity: 0.2 } });
// SceneView highlightOptions 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 } });
// highlight features with bright fuchsia color based on a query result let highlight; view.whenLayerView(treesLayer).then(function(layerView){ layerView.highlightOptions = { color: "#FF00FF", // bright fuchsia haloOpacity: 0.8, fillOpacity: 0.3 }; let query = treesLayer.createQuery(); query.where = "type = 'Quercus'"; treesLayer.queryFeatures(query).then(function(result){ highlight?.remove(); highlight = layerView.highlight(result.features); }); });
Event Overview
Name | Type | Summary | Class |
---|---|---|---|
{target: View,native: Object} |
Fires when browser focus is moved away from the view. more details |
View | |
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0|1|2,type: "click",stopPropagation: Function,timestamp: Number,native: Object} |
Fires after a user clicks on the view. more details |
View | |
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0|1|2,type: "double-click",stopPropagation: Function,timestamp: Number,native: Object} |
Fires after double-clicking on the view. more details |
View | |
{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} |
Fires during a pointer drag on the view. more details |
View | |
{target: View,native: Object} |
Fires when browser focus is on the view. more details |
View | |
{mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "hold",stopPropagation: Function,timestamp: Number,native: Object} |
Fires after holding either a mouse button or a single finger on the view for a short amount of time. more details |
View | |
{mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "immediate-click",stopPropagation: Function,timestamp: Number,native: Object} |
Fires right after a user clicks on the view. more details |
View | |
{mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "immediate-double-click",stopPropagation: Function,timestamp: Number,native: Object} |
Is emitted after two consecutive immediate-click events. more details |
View | |
{repeat: Boolean,key: String,type: "key-down",stopPropagation: Function,timestamp: Number,native: Object} |
Fires after a keyboard key is pressed. more details |
View | |
{type: "key-up",key: String,stopPropagation: Function,timestamp: Number,native: Object} |
Fires after a keyboard key is released. more details |
View | |
{layer: Layer,layerView: LayerView} |
Fires after each layer in the map has a corresponding LayerView created and rendered in the view. more details |
View | |
{layer: Layer,error: Error} |
Fires when an error emits during the creation of a LayerView after a layer has been added to the map. more details |
View | |
{layer: Layer,layerView: LayerView} |
Fires after a LayerView is destroyed and is no longer rendered in the view. more details |
View | |
{x: Number,y: Number,deltaY: Number,type: "mouse-wheel",stopPropagation: Function,timestamp: Number,native: Object} |
Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view. more details |
View | |
{pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-down",stopPropagation: Function,timestamp: Number,native: Object} |
Fires after a mouse button is pressed, or a finger touches the display. more details |
View | |
{pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-enter",stopPropagation: Function,timestamp: Number,native: Object} |
Fires after a mouse cursor enters the view, or a display touch begins. more details |
View | |
{pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-leave",stopPropagation: Function,timestamp: Number,native: Object} |
Fires after a mouse cursor leaves the view, or a display touch ends. more details |
View | |
{pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-move",stopPropagation: Function,timestamp: Number,native: Object} |
Fires after the mouse or a finger on the display moves. more details |
View | |
{pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-up",stopPropagation: Function,timestamp: Number,native: Object} |
Fires after a mouse button is released, or a display touch ends. more details |
View | |
{oldWidth: Number,oldHeight: Number,width: Number,height: Number} |
Fires when the view's size changes. more details |
View |
Event Details
-
blurSince: ArcGIS Maps SDK for JavaScript 4.7
-
Fires when browser focus is moved away from the view.
- Properties
-
target View
The view that the browser focus is moved away from.
native ObjectA standard DOM KeyboardEvent.
-
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.
- Properties
-
mapPoint Point
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.
- See also
Examples// Set up a click event handler and retrieve the screen point view.on("click", function(event) { // the hitTest() checks to see if any graphics in the view // intersect the given screen x, y coordinates view.hitTest(event) .then(getGraphics); });
view.on("click", function(event) { // you must overwrite default click-for-popup // behavior to display your own popup view.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 }); });
-
double-click
-
Fires after double-clicking on the view.
- Properties
-
mapPoint Point
The point location of the click on the view in the spatial reference of the map.
x 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.
Exampleview.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); });
-
drag
-
Fires during a pointer drag on the view.
- Properties
-
action String
Indicates the state of the drag. The two values
added
andremoved
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.
button NumberIndicates 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
.stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM MouseEvent.
Exampleview.on("drag", function(event){ // Print out the current state of the // drag event. console.log("drag state", event.action); });
-
focusSince: ArcGIS Maps SDK for JavaScript 4.7
-
Fires when browser focus is on the view.
- Properties
-
target View
The view that the browser focus is currently on.
native ObjectA standard DOM KeyboardEvent.
-
hold
-
Fires after holding either a mouse button or a single finger on the view for a short amount of time.
- Properties
-
mapPoint Point
The point location of the click on the view in the spatial reference of the map.
x 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.
Exampleview.on("hold", function(event) { // The event object contains the mapPoint and the screen coordinates of the location // that was clicked. console.log("hold at screen point", event.x, event.y); console.log("hold at map point", event.mapPoint); });
-
immediate-clickSince: ArcGIS Maps SDK for JavaScript 4.7
-
Fires right after a user clicks on the view. In contrast to the click event, the
immediate-click
event is emitted as soon as the user clicks on the view, and is not inhibited by a double-click event. This event is useful for interactive experiences that require feedback without delay.- Properties
-
mapPoint Point
The point location of the click on the view in the spatial reference of the map.
x 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.
Example// Set up an immediate-click event handler and retrieve the screen point view.on("immediate-click", function(event) { // the hitTest() checks to see if any graphics in the view // intersect the given screen x, y coordinates view.hitTest(event) .then(getGraphics); });
-
immediate-double-clickSince: ArcGIS Maps SDK for JavaScript 4.15
-
Is emitted after two consecutive immediate-click events. In contrast to double-click, an
immediate-double-click
cannot be prevented by use ofstopPropagation
on the immediate-click event and can therefore be used to react to double-clicking independently of usage of the immediate-click event.- Properties
-
mapPoint Point
The point location of the click on the view in the spatial reference of the map.
x 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.
-
key-down
-
Fires after a keyboard key is pressed.
- Properties
-
repeat Boolean
Indicates whether this is the first event emitted due to the key press, or a repeat.
key StringThe key value that was pressed, according to the MDN full list of key values.
type StringThe event type.
The value is always "key-down".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM KeyboardEvent.
Example// Zoom in when user clicks on "a" button // Zoom out when user clicks on "s" button view.on("key-down", function(event){ console.log("key-down", event); if (event.key === "a"){ let zm = view.zoom + 1; view.goTo({ target: view.center, zoom: zm }); } else if(event.key == "s"){ let zm = view.zoom - 1; view.goTo({ target: view.center, zoom: zm }); } });
-
key-up
-
Fires after a keyboard key is released.
- Properties
-
type String
The event type.
The value is always "key-up".
key StringThe key value that was released, according to the MDN full list of key values.
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM KeyboardEvent.
-
layerview-create
-
Fires after each layer in the map has a corresponding LayerView created and rendered in the view.
- Properties
-
layer Layer
The layer in the map for which the
layerView
was created.layerView LayerViewThe LayerView rendered in the view representing the layer in
layer
. - See also
Example// This function fires each time a layer view is created for a layer in // the map of the view. view.on("layerview-create", function(event) { // The event contains the layer and its layer view that has just been // created. Here we check for the creation of a layer view for a layer with // a specific id, and log the layer view if (event.layer.id === "satellite") { // The LayerView for the desired layer console.log(event.layerView); } });
-
layerview-create-error
-
Fires when an error emits during the creation of a LayerView after a layer has been added to the map.
- Properties
-
layer Layer
The layer in the map for which the view emitting this event failed to create a layer view.
error ErrorAn error object describing why the layer view failed to create.
- See also
Example// This function fires each time an error occurs during the creation of a layerview view.on("layerview-create-error", function(event) { console.error("LayerView failed to create for layer with the id: ", event.layer.id); });
-
layerview-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.
-
mouse-wheel
-
Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view.
- Properties
-
x Number
The horizontal screen coordinate of the click on the view.
y NumberThe vertical screen coordinate of the click on the view.
deltaY NumberNumber representing the vertical scroll amount.
type StringThe event type.
The value is always "mouse-wheel".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was emitted.
native ObjectA standard DOM WheelEvent.
Exampleview.on("mouse-wheel", function(event){ // deltaY value is positive when wheel is scrolled up // and it is negative when wheel is scrolled down. console.log(event.deltaY); });
-
pointer-down
-
Fires after a mouse button is pressed, or a finger touches the display.
- Properties
-
pointerId Number
Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.
pointerType StringIndicates the pointer type.
Possible Values:"mouse"|"touch"
x NumberThe horizontal screen coordinate of the pointer on the view.
y NumberThe vertical screen coordinate of the pointer on the view.
button NumberIndicates which mouse button was clicked.
buttons NumberIndicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "pointer-down".
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.
-
pointer-enter
-
Fires after a mouse cursor enters the view, or a display touch begins.
- Properties
-
pointerId Number
Uniquely identifies a pointer between multiple events. Ids might get reused after a pointer-up event.
pointerType StringIndicates the pointer type.
Possible Values:"mouse"|"touch"
x NumberThe horizontal screen coordinate of the pointer on the view.
y NumberThe vertical screen coordinate of the pointer on the view.
button NumberIndicates which mouse button was clicked.
buttons NumberIndicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "pointer-enter".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was created.
native ObjectA standard DOM PointerEvent.
-
pointer-leave
-
Fires after a mouse cursor leaves the view, or a display touch ends.
- Properties
-
pointerId Number
Uniquely identifies a pointer between multiple events. Ids might get reused after a pointer-up event.
pointerType StringIndicates the pointer type.
Possible Values:"mouse"|"touch"
x NumberThe horizontal screen coordinate of the pointer on the view.
y NumberThe vertical screen coordinate of the pointer on the view.
button NumberIndicates which mouse button was clicked.
buttons NumberIndicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "pointer-leave".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was created.
native ObjectA standard DOM PointerEvent.
-
pointer-move
-
Fires after the mouse or a finger on the display moves.
- Properties
-
pointerId Number
Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.
pointerType StringIndicates the pointer type.
Possible Values:"mouse"|"touch"
x NumberThe horizontal screen coordinate of the pointer on the view.
y NumberThe vertical screen coordinate of the pointer on the view.
button NumberIndicates which mouse button was clicked.
buttons NumberIndicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "pointer-move".
stopPropagation FunctionPrevents the event bubbling up the event chain.
timestamp NumberTime stamp (in milliseconds) at which the event was created.
native ObjectA standard DOM PointerEvent.
Example// Fires `pointer-move` event when user clicks on "Shift" // key and moves the pointer on the view. view.on('pointer-move', ["Shift"], function(event){ let point = view.toMap({x: event.x, y: event.y}); bufferPoint(point); });
-
pointer-up
-
Fires after a mouse button is released, or a display touch ends.
- Properties
-
pointerId Number
Uniquely identifies a pointer between multiple down, move, and up events. Ids might get reused after a pointer-up event.
pointerType StringIndicates the pointer type.
Possible Values:"mouse"|"touch"
x NumberThe horizontal screen coordinate of the pointer on the view.
y NumberThe vertical screen coordinate of the pointer on the view.
button NumberIndicates which mouse button was clicked.
buttons NumberIndicates which mouse buttons are pressed when the event is triggered. See MouseEvent.buttons.
type StringThe event type.
The value is always "pointer-up".
stopPropagation FunctionPrevents the event bubbling up the event chain. Inhibits the associated immediate-click, click and double-click events.
timestamp NumberTime stamp (in milliseconds) at which the event was created.
native ObjectA standard DOM PointerEvent.