Class: esri/views/View
Inheritance: View Accessor
Subclasses: MapView , SceneView
Since: ArcGIS API 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.

MapView (2D)SceneView (3D)
mapviewsceneview

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", "dojo/domReady!"], function(Map, MapView) {
  // Create a Map instance
  var map = new Map({
    basemap: "streets"
  });

  // Create a MapView instance (for 2D viewing) and set its map property to
  // the map instance we just created
  var 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.

See also:

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
NameTypeSummaryClass
Collection<LayerView>

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

more details
more detailsView
ViewAnimation

Represents an ongoing view animation initialized by goTo().

more details
more detailsView
HTMLDivElement

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

more details
more detailsView
String

The name of the class.

more details
more detailsAccessor
Boolean

Indicates if the browser focus is on the view.

more details
more detailsView
Collection<Graphic>

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

more details
more detailsView
GroundView

The view for the ground of the map.

more details
more detailsView
Number

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

more details
more detailsView
Boolean

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

more details
more detailsView
Collection<LayerView>

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

more details
more detailsView
Map

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

more details
more detailsView
Object

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

more details
more detailsView
Popup

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

more details
more detailsView
Boolean

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

more details
more detailsView
Boolean

Indicates if the view is being resized.

more details
more detailsView
Number[]

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

more details
more detailsView
SpatialReference

The spatial reference of the view.

more details
more detailsView
Boolean

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

more details
more detailsView
Boolean

Indicates if the view is visible on the page.

more details
more detailsView
String

The type of the view is either 2d (indicating a MapView) or 3d (indicating a SceneView).

more details
more detailsView
DefaultUI

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

more details
more detailsView
Boolean

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

more details
more detailsView
Number

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

more details
more detailsView

Property Details

allLayerViewsCollection<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:
animationViewAnimation

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

See also:
Autocasts from String

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

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

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

focusedBooleanreadonly
Since: ArcGIS API for JavaScript 4.7

Indicates if the browser focus is on the view.

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

See also:
Examples:
// Adds a graphic to the View
view.graphics.add(pointGraphic);
// Removes a graphic from the View
view.graphics.remove(pointGraphic);
groundViewGroundViewreadonly
Since: ArcGIS API for JavaScript 4.7

The view for the ground of the map.

heightNumberreadonly

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
interactingBooleanreadonly

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

Default Value:false

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

See also:
mapMap

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.

paddingObject

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

Properties:
left Number
optional

The left padding (in pixels).

top Number
optional

The top padding (in pixels).

right Number
optional

The right padding (in pixels).

bottom Number
optional

The bottom padding (in pixels).

Default Value:{left: 0, top: 0, right: 0, bottom: 0}
See also:

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

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

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

readyBooleanreadonly

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

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

Default Value:false
See also:
resizingBooleanreadonly

Indicates if the view is being resized.

Default Value:false
sizeNumber[]readonly

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

spatialReferenceSpatialReferenceautocast

The spatial reference of the view. This indicates the Projected Coordinate System or the Geographic Coordinate System used to locate geographic features in the map. In a SceneView the following supported coordinate systems are available.

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

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

Default Value:null
stationaryBooleanreadonly

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

Default Value:true
suspendedBooleanreadonly

Indicates if the view is visible on the page. Is true if the view has no container, a height or width equal to 0, or the CSS visibility is hidden.

Default Value:true
typeStringreadonly

The type of the view is either 2d (indicating a MapView) or 3d (indicating a SceneView).

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

Examples:
var 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");
updatingBooleanreadonly

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

Default Value:false
widthNumberreadonly

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

NameReturn TypeSummaryClass
Promise

Deprecated at 4.7.always() may be used to execute a function if creating an instance of the class is rejected or resolved.*

more details
more detailsView

Sets the focus on the view.

more details
more detailsView
Boolean

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

more details
more detailsView
Boolean

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

more details
more detailsView
Boolean

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

more details
more detailsView
Boolean

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

more details
more detailsView
Object

Registers an event handler on the instance.

more details
more detailsView
Promise

Deprecated at 4.7. Use otherwise() to call a function once creating an instance of the class is rejected.*

more details
more detailsView
Promise

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

more details
more detailsView
Promise<LayerView>

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

more details
more detailsView

Method Details

always(callbackOrErrback){Promise}
Deprecated
  • Deprecated at 4.7. This method will be removed at 4.8.

Deprecated at 4.7. always() may be used to execute a function if creating an instance of the class is rejected or resolved. The input function will always execute no matter the response.

Parameter:
callbackOrErrback Function
optional

The function to execute when creating an instance of the class is rejected or resolved.

Returns:
TypeDescription
PromiseReturns a new promise for the result of callbackOrErrback.
focus()
Since: ArcGIS API 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.

Parameter:
type String

The name of the event.

Returns:
TypeDescription
BooleanReturns true if the class supports the input event.
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:
TypeDescription
BooleanIndicates 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:
TypeDescription
BooleanIndicates 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:
TypeDescription
BooleanIndicates 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 the events to listen for.

modifiersOrHandler String[]|Function

Additional modifier keys to filter the events by. Alternatively, if no modifiers are required, the function to call when the event is fired.

handler? Function

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

Returns:
TypeDescription
ObjectReturns an event handler with a remove() method that can be called to stop listening for the event.
PropertyTypeDescription
removeFunctionWhen called, removes the listener from the event.
See also:
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(evt){
  var point = view2d.toMap({x: evt.x, y: evt.y});
  bufferPoint(point);
});
otherwise(errback){Promise}
Deprecated
  • Deprecated at 4.7. This method will be removed at 4.8.

Deprecated at 4.7. Use otherwise() to call a function once creating an instance of the class is rejected.

Parameter:
errback Function
optional

The function to execute when creating an instance of the class fails.

Returns:
TypeDescription
PromiseReturns a new promise for the result of errback.
when(callback, errback){Promise}
Since: ArcGIS API for JavaScript 4.6

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

Parameters:
callback Function
optional

The function to call when the promise resolves.

errback Function
optional

The function to execute when the promise fails.

Returns:
TypeDescription
PromiseReturns 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 then() in the same way
var 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:
layer Layer

The layer for which to obtain its LayerView.

Returns:
TypeDescription
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
var 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
    });

Event Overview

NameTypeSummaryClass
{target: View,native: Object}

Fires when browser focus is moved away from the view.

more details
more detailsView
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: Number,type: String,stopPropagation: Function,timestamp: Number,native: Object}

Fires after a user clicks on the view.

more details
more detailsView
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: Number,type: String,stopPropagation: Function,timestamp: Number,native: Object}

Fires after double-clicking on the view.

more details
more detailsView
{action: String,x: Number,y: Number,origin: Object,button: Number,buttons: Number,type: String,radius: Number,angle: Number,stopPropagation: Function,timestamp: Number,native: Object}

Fires during a pointer drag on the view.

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

Fires when browser focus is on the view.

more details
more detailsView
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: Number,type: String,stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more detailsView
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: Number,type: String,stopPropagation: Function,timestamp: Number,native: Object}

Fires right after a user clicks on the view.

more details
more detailsView
{repeat: Boolean,key: String,type: String,stopPropagation: Function,timestamp: Number,native: Object}

Fires after a keyboard key is pressed.

more details
more detailsView
{type: String,stopPropagation: Function,timestamp: Number,native: Object}

Fires after a keyboard key is released.

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

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

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

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

more details
more detailsView
{x: Number,y: Number,deltaY: Number,type: String,stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more detailsView
{pointerId: Number,pointerType: String,x: Number,y: Number,button: Number,buttons: Number,type: String,stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more detailsView
{pointerId: Number,pointerType: String,x: Number,y: Number,button: Number,buttons: Number,type: String,stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more detailsView
{pointerId: Number,pointerType: String,x: Number,y: Number,button: Number,buttons: Number,type: String,stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more detailsView
{pointerId: Number,pointerType: String,x: Number,y: Number,button: Number,buttons: Number,type: String,stopPropagation: Function,timestamp: Number,native: Object}

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

more details
more detailsView
{pointerId: Number,pointerType: String,x: Number,y: Number,button: Number,buttons: Number,type: String,stopPropagation: Function,timestamp: Number,native: Object}

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

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

Fires when the view's size changes.

more details
more detailsView

Event Details

blur
Since: ArcGIS API for JavaScript 4.7

Fires when browser focus is moved away from the view.

Properties:
target View

The view that the browser focus is moved away from.

native Object

A standard DOM KeyboardEvent.

click

Fires after a user clicks on the view. This event emits slightly slower than a pointer-down 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.

The horizontal screen coordinate of the click on the view.

The vertical screen coordinate of the click on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates the current mouse button state.

ValueDescription
0left click (or touch)
1middle click
2right click
type String

For click the type is always click.

stopPropagation Function

Prevents event propagation bubbling up the event chain.

By default the click event will close the view's popup if the clicked location doesn't intersect a feature containing a PopupTemplate. If calling view.popup.open() to display custom content in the popup, you should call event.stopPropagation() on the click event object to disable this default behavior. This ensures the popup will remain open or open with new custom content when the user clicks other locations in the view.

timestamp Number

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

native Object

A standard DOM PointerEvent.

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

 // Get the coordinates of the click on the view
 var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
 var 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.

The horizontal screen coordinate of the click on the view.

The vertical screen coordinate of the click on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates the current mouse button state.

ValueDescription
0left click (or touch)
1middle click
2right click
type String

For double-click the type is always double-click.

stopPropagation Function

Prevents event propagation bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

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

Fires during a pointer drag on the view.

Properties:
action String

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

Known Values: start | added | update | removed | end

The horizontal screen coordinate of the pointer on the view.

The vertical screen coordinate of the pointer on the view.

origin Object

Screen coordinates of the start of the drag.

Specification:

The horizontal screen coordinate of the pointer on the view.

The vertical screen coordinate of the pointer on the view.

button Number

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

ValueDescription
0left mouse button (or touch)
1middle mouse button
2right mouse button
buttons Number

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

type String

For drag the type is always drag.

radius Number

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

angle Number

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

stopPropagation Function

Prevents event propagation bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM MouseEvent.

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

Fires when browser focus is on the view.

Properties:
target View

The view that the browser focus is currently on.

native Object

A standard DOM KeyboardEvent.

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.

The horizontal screen coordinate of the hold on the view.

The vertical screen coordinate of the hold on the view.

button Number

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

ValueDescription
0left mouse button (or touch)
1middle mouse button
2right mouse button
buttons Number

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

type String

For hold the type is always hold.

stopPropagation Function

Prevents event propagation bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

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

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

Properties:
mapPoint Point

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

The horizontal screen coordinate of the click on the view.

The vertical screen coordinate of the click on the view.

button Number

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

ValueDescription
0left click (or touch)
1middle click
2right click
buttons Number

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

type String

For click the type is always immediate-click.

stopPropagation Function

Prevents event propagation bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

Example:
// Set up an immediate-click event handler and retrieve the screen point
view.on("immediate-click", function(event) {
 // the hitTest() checks to see if any graphics in the view
 // intersect the given screen x, y coordinates
 view.hitTest(event)
  .then(getGraphics);
});
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 String

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

type String

For key-down the type is always key-down.

stopPropagation Function

Prevents event propagation bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM KeyboardEvent.

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

 if (evt.key === "a"){
   var zm = view.zoom + 1;

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

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

Fires after a keyboard key is released.

Properties:
type String

For key-up the type is always key-up.

stopPropagation Function

Prevents event propagation bubbling up the event chain.

timestamp Number

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

native Object

A 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 LayerView

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

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

Properties:
layer Layer

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

layerView LayerView

The LayerView that was destroyed in the view.

mouse-wheel

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

Properties:

The horizontal screen coordinate of the click on the view.

The vertical screen coordinate of the click on the view.

deltaY Number

Number representing the vertical scroll amount.

type String

For mouse-wheel the type is always mouse-wheel.

stopPropagation Function

Prevents event propagation bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM WheelEvent.

Example:
view.on("mouse-wheel", function(evt){
 // deltaY value is postive when wheel is scrolled up
 // and it is negative when wheel is scrolled down.
 console.log(evt.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 String

Indicates the pointer type.

Known Values: mouse | touch

The horizontal screen coordinate of the pointer on the view.

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

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

type String

For pointer-down the type is always pointer-down.

stopPropagation Function

Prevents event propagation bubbling up the event chain.

timestamp Number

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

native Object

A 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 String

Indicates the pointer type.

Known Values: mouse | touch

The horizontal screen coordinate of the pointer on the view.

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

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

type String

Type of the event. It is always pointer-enter for this event.

stopPropagation Function

Prevents further propagation of the current event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

pointer-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 String

Indicates the pointer type.

Known Values: mouse | touch

The horizontal screen coordinate of the pointer on the view.

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

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

type String

Type of the event. It is always pointer-leave for this event.

stopPropagation Function

Prevents further propagation of the current event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

pointer-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 String

Indicates the pointer type.

Known Values: mouse | touch

The horizontal screen coordinate of the pointer on the view.

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

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

type String

Type of the event. It is always pointer-move for this event.

stopPropagation Function

Prevents further propagation of the current event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

Example:
// Fires `pointer-move` event when user clicks on "Shift"
// key and moves the pointer on the view.
view.on('pointer-move', ["Shift"], function(evt){
  var point = view2d.toMap({x: evt.x, y: evt.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 String

Indicates the pointer type.

Known Values: mouse | touch

The horizontal screen coordinate of the pointer on the view.

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

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

type String

Type of the event. It is always pointer-up for this event.

stopPropagation Function

Prevents further propagation of the current event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

resize

Fires when the view's size changes.

Properties:
oldWidth Number

The previous view width in pixels

oldHeight Number

The previous view height in pixels

width Number

The new measured view width in pixels

height Number

The new measured view height in pixels

See also:
Searching...

API Reference search results

NameTypeModule

There were no match results from your search criteria.