ESM: import View from "@arcgis/core/views/View.js";
CDN: const View = await $arcgis.import("@arcgis/core/views/View.js");
Class: @arcgis/core/views/View
Since: ArcGIS Maps SDK for JavaScript 4.0
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.
To associate a view with a map, you must set the map property to an instance of Map.
// Load the Map and MapView modules
const [Map, MapView] = await $arcgis.import(["@arcgis/core/Map.js", "@arcgis/core/views/MapView.js"]);
// Create a Map instance
const 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
const 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.
Show inherited properties Hide inherited properties
Property DetailsCollection containing a flat list of all the created LayerViews related to the basemap, operational layers, and group layers in this view.
Represents an ongoing view animation initialized by goTo(). You may watch this property to be notified when the view's extent changes .
Represents the view for a single basemap after it has been added to the map.
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.
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.
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();
}
);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.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); 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"; interacting Booleanreadonly
Indication whether the view is being interacted with (for example when panning or by an interactive tool).
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.
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,
}
}); 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}
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
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);
}
}); 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.
The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map.
stationary Booleanreadonly
Indication whether the view is animating, being navigated with or resizing.
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]
});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 is either 2d (indicating a MapView) or 3d (indicating a SceneView).
updating Booleanreadonly
Indicates whether the view is being updated by additional data requests to the network, or by processing received data.
Since: ArcGIS Maps SDK for JavaScript 4.11 View since 4.0, views added at 4.11.
Contains the collection of active views on the page. Only views that are ready appear in the collection.
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.
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();
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
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");
} 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). 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. 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. 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);
});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"); 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()
); 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
}); 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
}); EventDefer(operation){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.33 View since 4.0, EventDefer added at 4.33.
Defers the event pipeline until the result of calling the passed in asynchronous function is resolved. This is useful when the decision whether or not to stop propagating an event is not known until an asynchronous operation is completed. An example of this is performing a hitTest on the view (asynchronous) on a "click" event and stop the propagation (for example to prevent a popup from showing) only when a specific feature is clicked.
Use with caution
Calling defer on an event will stall the entire event pipeline until the asynchronous operation is resolved. This means that no other events will be processed until the operation is completed. This can lead to a poor user experience, for example when deferring a "pointer-move" event significantly.
Returns
Type Description Promise The result of calling the passed in operation.Example
view.on("click", (event) => {
event.defer(async () => {
const hitTestResult = await view.hitTest(event);
if (hitTestResult.results.length) {
// stop the event from propagating
event.stopPropagation();
console.log("found hit, stopping propagation to prevent popup", hitTestResult.results[0]);
}
});
}); EventDeferredOperation(){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.33 View since 4.0, EventDeferredOperation added at 4.33.
Aynchronous function passed to the defer method of an event.
Returns
Type Description Promise The event pipeline is deferred until the promise is resolved.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 Details analysis-view-create
Fires when the view for an analysis is created.
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.
analysis-view-destroy
Fires after an analysis view is destroyed.
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.
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
});
}); 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);
});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);
});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.
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);
}); 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);
}); 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.
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
});
}
});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.
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);
}
}); 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);
}); 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.
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);
}); 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.
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.
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.
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);
}); 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.
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