• Overview
• Using the view
• Programmatic navigation
• MapView navigation
• MapView navigation with Gamepad and 3DConnexion Devices

Overview

A MapView displays a 2D view of a Map instance. An instance of MapView must be created to render a Map (along with its operational and base layers) in 2D. To render a map and its layers in 3D, see the documentation for SceneView. For a general overview of views, see View.

For a map to be visible to the user in the DOM, a MapView must be created and reference a minimum of two objects: a Map instance and a DOM element. Each is set in the map and container properties respectively.

// Create a MapView instance (for 2D viewing)
var view = new MapView({
  map: myMap,  // References a Map instance
  container: "viewDiv"  // References the ID of a DOM element
});

Using the view

In addition to being responsible for the rendering of the Map and its elements, the MapView handles the interaction between the user and the map. For example, the traditional map scale isn't set on the Map; it's set on the MapView.

view.scale = 24000; // Sets a 1:24,0000 scale on the view

You can set the initial extent (or visible portion of the map) by using either a combination of center and zoom, or by setting the extent property.

// Set the center and zoom level on the view
view.center = [-112, 38];  // Sets the center point of the view at a specified lon/lat
view.zoom = 13;  // Sets the zoom LOD to 13
// Set the extent on the view
view.extent = new Extent({
  xmin: -9177882,
  ymin: 4246761,
  xmax: -9176720,
  ymax: 4247967,
  spatialReference: {
    wkid: 102100
  }
});

.when() method on the MapView instance can be called to execute processes that may only run after the map has loaded.

// Create a MapView instance (for 2D viewing)
var view = new MapView({
  map: myMap,  // References a Map instance
  container: "viewDiv"  // References the ID of a DOM element
});

view.when(function(){
 // All the resources in the MapView and the map have loaded. Now execute additional processes
}, function(error){
 // Use the errback function to handle when the view doesn't load properly
 console.log("The view's resources failed to load: ", error);
});

For live examples of view.when(), see the how to Add 2D overview map in SceneView samples.

Programmatic navigation

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

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

Because the View handles user interaction, events such as click are handled on the MapView. Animations are also possible with the goTo() method, which allows you to change or move the MapView from one extent to another.

MapView navigation

MapView navigation is enabled by default and includes mouse interaction as described in the table below.

Action	MapView behavior
Drag	Pan
Double-click	Zoom in at the cursor
Shift+Double-click	Zoom out at the cursor
Scroll forward	Zoom in at the cursor
Scroll backward	Zoom out at the cursor
Right-click+Drag	2D-rotate
Shift+Left-click+Drag	Zoom to extent of drawn graphic
Arrow Keys	Nudge the view to left, right, up or down
N	Adjust the view to point north
A	Rotate the view counterclockwise
D	Rotate the view clockwise
+	Incrementally zoom in at the center of the map
-	Incrementally zoom out at the center of the map

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

See our samples on disabling view navigation for examples.

MapView navigation with Gamepad and 3DConnexion devices

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

Gamepad Action	MapView behavior
Left Trigger	Zoom in
Right Trigger	Zoom out
Left Stick	Pan the view
Right Stick	Rotate the view

Action Image	SpaceMouse Action	MapView behavior
	Push (left/right/forward/backward)	Pan the view
	Pull up	Zoom out
	Push down	Zoom in
	Rotate clockwise	Rotate the view clockwise
	Rotate counterclockwise	Rotate the view counterclockwise

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

Note: zoom snapping must be disabled for continuous zooming.

view.constraints.snapToZoom = false;

See also:

• Intro to MapView

• Sample - View padding

• Sample - Geodesic Buffers (2D & 3D)

• SceneView
• Map
• ViewAnimation

Constructors

new MapView(properties)

Parameter:

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

Example:

// Typical usage
var view = new MapView({
  // ID of DOM element containing the view
  container: "viewDiv",
  // Map/WebMap object
  map: new Map()
});

Property Overview

Property Details

allLayerViewsCollection<LayerView> inherited

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

See also:

• LayerView

animationViewAnimation

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

See also:

• goTo()

Example:

view.watch("animation", function(response){
  if(response && response.state === "running"){
    console.log("Animation in progress");
  }
  else{
   console.log("No animation");
  }
});

breakpointsObject

A convenience property used for defining the breakpoints on the height and width of the view. The sizes specified here determine the values of the widthBreakpoint and heightBreakpoint properties depending on the view's size.

Setting up breakpoints can aid in responsive app design. It does this by watching width and height breakpoints. This is helpful as it removes the need for multiple @media calls. Instead of listening for the view's size and/or resizes property, you can set up a watch handler for either the widthBreakpoint or heightBreakpoint properties of the view.

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

Properties:

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

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

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

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

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

See also:

• Sample: Responsive apps using CSS

• MDN Web docs: Media Queries

Example:

// Instead of watching the size or resizing properties
view.watch(size)
view.watch(resizing)

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

centerPointautocast

Autocasts from Number[]|Object

Represents the view's center point; when setting the center, you may pass a Point instance or an array of numbers representing a longitude/latitude pair ([-100.4593, 36.9014]). Setting the center immediately changes the current view. For animating the view, see goTo().

If set in the constructor, this property will be ignored if the viewpoint or extent properties are also set in the constructor.

The returned Point object is always in the spatial reference of the map and may be modified internally. To persist the returned object, create a clone using Point.clone().

See also:

• goTo()

Examples:

// Sets the initial center point of the view to lon/lat coordinates
var view = new MapView({
  center: [-112, 38]
});

// Updates the view's center point to a pre-determined Point object
var pt = new Point({
  x: 12804.24,
  y: -1894032.09,
  spatialReference: 2027
});
view.center = pt;

constraintsObject

Specifies constraints to scale, zoom, and rotation that may be applied to the MapView. See object specification below.

Properties:

lods LOD[] optional An array of LODs. If not specified, this value is read from the Map. This property may be autocast.

minScale Number optional The minimum scale the user is allowed to zoom to within the view.

maxScale Number optional The maximum scale the user is allowed to zoom to within the view. Setting this value to 0 allows the user to overzoom layer tiles.

minZoom Number optional The minimum zoom level the user is allowed to zoom to within the view.

maxZoom Number optional The maximum zoom level the user is allowed to zoom to within the view. Setting this value to 0 allows the user to overzoom layer tiles.

snapToZoom Boolean optional Default Value:true When true, the view snaps to the next LOD when zooming in or out. When false, the zoom is continuous.

rotationEnabled Boolean optional Default Value:true Indicates whether the user can rotate the map.

effectiveLODs LOD[] optional A read-only property that specifies the levels of detail (LODs) read from the Map.

effectiveMinZoom Number optional A read-only property that specifies the minimum zoom level the user is allowed to zoom to within the view.

effectiveMaxZoom Number optional A read-only property that specifies the maximum zoom level the user is allowed to zoom to within the view.

effectiveMinScale Number optional A read-only property that specifies the minimum scale the user is allowed to zoom to within the view.

effectiveMaxScale Number optional A read-only property that specifies the maximum scale the user is allowed to zoom to within the view.

Example:

view.constraints = {
  minScale: 500000,  // User cannot zoom out beyond a scale of 1:500,000
  maxScale: 0,  // User can overzoom tiles
  rotationEnabled: false  // Disables map rotation
};

containerHTMLDivElementautocast inherited

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.

extentExtentautocast

The extent represents the visible portion of a map within the view as an instance of Extent. Setting the extent immediately changes the view without animation. To animate the view, see goTo().

The returned Extent object is an internal reference which may be modified internally. To persist the returned object, create a copy using Extent.clone().

Default Value:null

See also:

• goTo()

Example:

var ext = new Extent({
  xmin: -13056650,
  ymin: 6077558,
  xmax: -13055709,
  ymax: 6077938,
  spatialReference: new SpatialReference({wkid:3857})
});
view.extent = ext;  // Updates the view without animation

focusedBooleanreadonly inherited

Since: ArcGIS API for JavaScript 4.7

Indicates if the browser focus is on the view.

graphicsCollection<Graphic> inherited

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

See also:

• Graphic
• GraphicsLayer

• Intro to graphics

Examples:

// Adds a graphic to the View
view.graphics.add(pointGraphic);

// Removes a graphic from the View
view.graphics.remove(pointGraphic);

groundViewGroundViewreadonly inherited

Since: ArcGIS API for JavaScript 4.7

The view for the ground of the map.

heightNumberreadonly inherited

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

The view container needs to have a height greater than 0 to be displayed.

Default Value:0

heightBreakpointString

A convenience property indicating the general size of the view's height. This value is determined based on where the view's height falls in the ranges defined in the breakpoints property. See the table below for a list of possible values. Use the breakpoints property to override the default thresholds.

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

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

See also:

• Sample: Responsive widgets

• Sample: Responsive apps using CSS

Example:

view.watch("heightBreakpoint", function(newVal){
  if (newVal === "xsmall"){
    // clear the view's default UI components if
    // app is used on a mobile device
    view.ui.components = [];
  }
});

highlightOptionsObjectautocast

Since: ArcGIS API for JavaScript 4.5

Options for configuring the highlight. Use the highlight method on the appropriate LayerView to highlight a feature.

Properties:

color Color optional Default Value:#00ffff Autocasts from Object|Number[]|String The color of the highlight.

haloOpacity Number optional Default Value:1 The opacity of the highlight halo. This will be multiplied with the opacity specified in color.

fillOpacity Number optional Default Value:0.25 The opacity of the fill (area within the halo). This will be multiplied with the opacity specified in color.

See also:

• FeatureLayerView.highlight()

Example:

var view = new MapView({
  map: map,
  highlightOptions: {
    color: [255, 255, 0, 1],
    haloOpacity: 0.9,
    fillOpacity: 0.2
  }
});

inputInputreadonly inherited

Since: ArcGIS API for JavaScript 4.9

Options to configure input handling of the View.

Example:

// Make gamepad events to emit independently of focus.
view.input.gamepad.enabledFocusMode = "none";

interactingBooleanreadonly inherited

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

Default Value:false

layerViewsCollection<LayerView> inherited

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

See also:

• LayerView

mapMap inherited

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.

navigationNavigationreadonly inherited

Since: ArcGIS API for JavaScript 4.9

Options to configure the navigation behavior of the View.

Example:

//disable gamepad navigation
view.navigation.gamepad.enabled = false;

orientationStringreadonly

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

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

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

paddingObject inherited

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

Properties:

left Number optional The left padding (in pixels).

top Number optional The top padding (in pixels).

right Number optional The right padding (in pixels).

bottom Number optional The bottom padding (in pixels).

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

See also:

• Sample - View padding

popupPopupautocast inherited

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.

In addition, if wanting to prevent any popups from opening, use the syntax below:

Example:

view.popup = null;

readyBooleanreadonly inherited

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.

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:

• when()

resizeAlignString

Defines which anchor stays still while resizing the browser window. The default, center, ensures the view's center point remains constantly visible as the window size changes. The other options allow the respective portion of the view to remain visible when the window's size is changed.

Possible values: center | left | right | top | bottom | top-left | top-right | bottom-left | bottom-right

Default Value:center

resizingBooleanreadonly inherited

Indicates if the view is being resized.

Default Value:false

resolutionNumberreadonly

Since: ArcGIS API for JavaScript 4.9

Represents the size of one pixel in map units. The value of resolution can be found by dividing the extent width by the view's width.

rotationNumber

The clockwise rotation of due north in relation to the top of the view in degrees. The view may be rotated by directly setting the rotation or by using the following mouse event: Right-click + Drag. Map rotation may be disabled by setting the rotationEnabled property in constraints to false. See the code snippet below for an example of this.

Default Value:0

Examples:

// Due north is rotated 90 degrees, pointing to the right side of the view
view.rotation = 90;

// Due north is rotated 180 degrees, pointing to the bottom of the view
view.rotation = 180;

// Due north is rotated 270 degrees, pointing to the left side of the view
view.rotation = 270;

// Due north is rotated 0 degrees, pointing to the top of the view (the default)
view.rotation = 0; // 360 or multiple of 360 (e.g. 720) works here as well.

// Disables map rotation
view.constraints = {
  rotationEnabled: false
};

scaleNumber

Represents the map scale at the center of the view. Setting the scale immediately changes the view. For animating the view, see goTo().

See also:

• goTo()

Example:

view.scale = 24000;  // Sets the map scale in the view's center to 1:24,000

sizeNumber[]readonly inherited

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

spatialReferenceSpatialReferenceautocast inherited

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:

• In the case of a SceneView, if the map is a WebScene instance, the WebScene.initialViewProperties.spatialReference is used.
• In all other cases, the spatial reference is derived from the first layer that loads in this order:
  • map.basemap.baseLayers
  • map.layers
  • map.ground.layers

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

Default Value:null

stationaryBooleanreadonly inherited

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

Default Value:true

suspendedBooleanreadonly inherited

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 dimension of the view. For MapView, this value is always 2d.

uiDefaultUIautocast inherited

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 inherited

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

Default Value:false

viewpointViewpoint

Represents the current view as a Viewpoint or point of observation on the view. Setting the viewpoint immediately changes the current view. For animating the view, see goTo().

The returned Viewpoint object is an internal reference which may be modified internally. To persist the returned object, create a copy using Viewpoint.clone().

See also:

• goTo()

widthNumberreadonly inherited

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

The view container needs to have a width greater than 0 to be displayed.

Default Value:0

widthBreakpointString

A convenience property indicating the general size of the view's width. This value is determined based on where the view's width falls in the ranges defined in the breakpoints property. See the table below for a list of possible values. Use the breakpoints property to override the default thresholds.

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

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

See also:

• Sample: Responsive widgets

• Sample: Responsive apps using CSS

Example:

view.watch("widthBreakpoint", function(newVal){
  if (newVal === "xsmall"){
    // clear the view's default UI components if
    // app is used on a mobile device
    view.ui.components = [];
  }
});

zoomNumber

Represents the level of detail (LOD) at the center of the view. Setting the zoom immediately changes the current view. For animating the view, see goTo().

Setting this property in conjunction with center is a convenient way to set the initial extent of the view.

See also:

• goTo()

Examples:

view.zoom = 3;  // Sets the LOD to 3 (small map scale)
view.zoom = 18; // Sets the LOD to 18 (large map scale)

// Set the zoom level and center in the constructor
var view = new MapView({
  zoom: 10,
  center: [-120, 34],
  map: map
});

Method Overview

Method Details

focus()inherited

Since: ArcGIS API for JavaScript 4.5

Sets the focus on the view.

goTo(target, options){Promise}

Sets the view to a given target. The target parameter can be one of the following:

• [longitude, latitude] pair of coordinates
• Geometry (or array of Geometry[])
• Graphic (or array of Graphic[])
• Viewpoint
• Object with a combination of target, center and scale properties (with target being any of the types listed above). The center property is provided as a convenience to animate the MapView.center and is equivalent to specifying the target with the center Point.

This function returns a promise which resolves as soon as the new view has been set to the target. If the transition is animated, then the ongoing animation can be obtained using MapView.animation.

If a tiled map service is used as the basemap and snapToZoom property is set to true in constraints, the goTo method will zoom to the level of detail (LOD) of the basemap that is nearest to the defined target. If snapToZoom property is set to false, the goTo method will zoom to the exact target.

Parameters:

target Number[]|Geometry|Geometry[]|Graphic|Graphic[]|Viewpoint|Object The target location/viewpoint to animate to. When using an object for target, use the properties in the table below. Specification: target Number[]|Geometry|Geometry[]|Graphic|Graphic[]|Viewpoint optional The target of the animation. center Number[] optional The MapView.center to go to. scale Number optional The MapView.scale to go to. zoom Number optional The MapView.zoom to go to.

options Object optional Animation options. See properties below for object specifications. Specification: animate Boolean optional Default Value: true Indicates if the transition to the new view should be animated. If set to false, duration and easing properties are ignored. duration Number optional Default Value: 200 The duration of the animation in milliseconds. easing String|Function optional Default Value: ease The easing function used for the animation. See easing functions for graphical representations of these functions. Possible Values: linear | ease | ease-in | ease-out | ease-in-out

Returns:

Type	Description
Promise	A promise which resolves when the view is set to the target.

Examples:

var pt = new Point({
  latitude: 49,
  longitude: -126
});

// go to the given point
view.goTo(pt);

var opts = {
  duration: 5000  // Duration of animation will be 5 seconds
};

// go to point at LOD 15 with custom duration
view.goTo({
  target: pt,
  zoom: 15
}, opts);

// go to same point using center and zoom
view.goTo({
  center: [-126, 49],
  zoom: 15
});

hasEventListener()

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

hitTest(screenPoint){Promise<HitTestResult>}

Returns the topmost feature from each layer that intersects the specified screen coordinates. The following layer types will return a result if a hit is made on an intersecting feature: GraphicsLayer, FeatureLayer, CSVLayer, GeoRSSLayer, KMLLayer, and StreamLayer.

At 4.6 and later, a hit test will always return a result from VectorTileLayer. However, the result will only indicate the ID and the name of the layer within the vector tile style that intersects the screen point. Detailed attribute and spatial information about the actual feature represented in the layer is not returned. HitTest results returned from VectorTileLayers are primarily used for Vector tile style editor applications.

Parameters:

screenPoint Object The screen coordinates of the click on the view. Specification: x Number The horizontal screen coordinate of the click on the view. y Number The vertical screen coordinate of the click on the view.

Returns:

Type	Description
Promise<HitTestResult>	When resolved, returns an object containing the graphics (if present) that intersect the given screen coordinates.

See also:

• Sample: Access features with click events

Example:

// Get the screen point from the view's click event
view.on("click", function (event) {
 var screenPoint = {
   x: event.x,
   y: event.y
 };

 // Search for graphics at the clicked location
 view.hitTest(screenPoint).then(function (response) {
  if (response.results.length) {
   var graphic = response.results.filter(function (result) {
    // check if the graphic belongs to the layer of interest
    return result.graphic.layer === myLayer;
   })[0].graphic;
   // do something with the result graphic
   console.log(graphic.attributes);
  }
 });
});

isFulfilled(){Boolean}inherited

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

Returns:

Type	Description
Boolean	Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).

isRejected(){Boolean}inherited

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

Returns:

Type	Description
Boolean	Indicates whether creating an instance of the class has been rejected.

isResolved(){Boolean}inherited

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

Returns:

Type	Description
Boolean	Indicates whether creating an instance of the class has been resolved.

on(type, modifiersOrHandler, handler){Object}inherited

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

Parameters:

type String|String[] The name of the event or events to listen for.

modifiersOrHandler String[]|Function Additional modifier keys to filter events. Please see Key Values for possible values. All the standard key values are supported. Alternatively, if no modifiers are required, the function will call when the event fires. The following events don't support modifier keys: blur, focus, layerview-create, layerview-destroy, resize.

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

Returns:

Type	Description
Object	Returns an event handler with a remove() method that can be called to stop listening for the event. Property Type Description remove Function When called, removes the listener from the event.

See also:

• dojo/on

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

toMap(screenPoint){Point}

Converts the given screen point to a map point.

Parameters:

screenPoint Object The screen coordinates to convert. Specification: x Number The horizontal screen coordinate to convert. y Number The vertical screen coordinate to convert.

Returns:

Type	Description
Point	The map point corresponding to the given screen point.

toScreen(point, screenPoint){ScreenPoint}

Converts the given map point to a screen point.

Parameters:

point Point A point geometry.

screenPoint ScreenPoint optional ScreenPoint object that will reference the result.

Returns:

Type	Description
ScreenPoint	The screen point corresponding to the given map point.

when(callback, errback){Promise}inherited

Since: ArcGIS API for JavaScript 4.6

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

Parameters:

callback Function optional The function to call when the promise resolves.

errback Function optional The function to execute when the promise fails.

Returns:

Type	Description
Promise	Returns a new promise for the result of callback that may be used to chain additional functions.

Example:

// Although this example uses MapView, any class instance that is a promise may use 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>}inherited

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

Parameter:

layer Layer The layer for which to obtain its LayerView.

Returns:

Type	Description
Promise<LayerView>	Resolves to an instance of LayerView for the specified layer.

See also:

• Sample - StreamLayer

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

Type Definitions

HitTestResult

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

Properties:

results Object[] An array of result objects returned from the hitTest(). Results are returned when the location of the input screen coordinates intersect a Graphic in the view. See the table below for the specification of each object in this array. Specification: graphic Graphic A graphic representing a feature in the view that intersects the input screen coordinates. If the graphic comes from a layer with an applied Renderer, then the symbol property will be empty. Other properties may be empty based on the context in which the graphic is fetched. If the result comes from a VectorTileLayer then a static graphic is returned with two attributes: layerId and layerName. These correspond to the name and id of the style-layer in the vector tile style. mapPoint Point The point geometry in the spatial reference of the view corresponding with the input screen coordinates.

Event Overview

{target: View,native: Object}

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

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

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

{target: View,native: Object}

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

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

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

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

{layer: Layer,layerView: LayerView}

{layer: Layer,layerView: LayerView}

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

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

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

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

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

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

{oldWidth: Number,oldHeight: Number,width: Number,height: Number}

Event Details

blurinherited

Since: ArcGIS API for JavaScript 4.7

Fires when browser focus is moved away from the view.

Properties:

target View The view that the browser focus is moved away from.

native Object A standard DOM KeyboardEvent.

clickinherited

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

x Number The horizontal screen coordinate of the click on the view.

y Number The vertical screen coordinate of the click on the view.

button Number Indicates which mouse button was clicked.

buttons Number Indicates the current mouse button state. Value Description 0 left click (or touch) 1 middle click 2 right click

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:

• Sample: Access features with click events

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-clickinherited

Fires after double-clicking on the view.

Properties:

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

x Number The horizontal screen coordinate of the click on the view.

y Number The vertical screen coordinate of the click on the view.

button Number Indicates which mouse button was clicked.

buttons Number Indicates the current mouse button state. Value Description 0 left click (or touch) 1 middle click 2 right click

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

draginherited

Fires during a pointer drag on the view.

Properties:

action String Indicates the state of the drag. The two values added and removed indicate a change in the number of pointers involved. Possible Values: start | added | update | removed | end

x Number The horizontal screen coordinate of the pointer on the view.

y Number The vertical screen coordinate of the pointer on the view.

origin Object Screen coordinates of the start of the drag. Specification: x Number The horizontal screen coordinate of the pointer on the view. y Number The vertical screen coordinate of the pointer on the view.

button Number Indicates which mouse button was clicked at the start of the drag. See MouseEvent.button. Value Description 0 left mouse button (or touch) 1 middle mouse button 2 right mouse button

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

focusinherited

Since: ArcGIS API for JavaScript 4.7

Fires when browser focus is on the view.

Properties:

target View The view that the browser focus is currently on.

native Object A standard DOM KeyboardEvent.

holdinherited

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

Properties:

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

x Number The horizontal screen coordinate of the hold on the view.

y Number The vertical screen coordinate of the hold on the view.

button Number Indicates which mouse button was held down. See MouseEvent.button. Value Description 0 left mouse button (or touch) 1 middle mouse button 2 right mouse button

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-clickinherited

Since: ArcGIS API for JavaScript 4.7

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

Properties:

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

x Number The horizontal screen coordinate of the click on the view.

y Number The vertical screen coordinate of the click on the view.

button Number Indicates which mouse button was clicked. See MouseEvent.button. Value Description 0 left click (or touch) 1 middle click 2 right click

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-downinherited

Fires after a keyboard key is pressed.

Properties:

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

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

type String 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-upinherited

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-createinherited

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

Properties:

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

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

See also:

• View.whenLayerView()

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-destroyinherited

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

Properties:

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

layerView LayerView The LayerView that was destroyed in the view.

mouse-wheelinherited

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

Properties:

x Number The horizontal screen coordinate of the click on the view.

y Number The vertical screen coordinate of the click on the view.

deltaY Number Number representing the vertical scroll amount.

type String 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-downinherited

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

Properties:

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

pointerType String Indicates the pointer type. Possible Values: mouse | touch

x Number The horizontal screen coordinate of the pointer on the view.

y Number The vertical screen coordinate of the pointer on the view.

button Number Indicates which mouse button was clicked.

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

type String 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-enterinherited

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

Properties:

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

pointerType String Indicates the pointer type. Possible Values: mouse | touch

x Number The horizontal screen coordinate of the pointer on the view.

y Number The vertical screen coordinate of the pointer on the view.

button Number Indicates which mouse button was clicked.

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

type String 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-leaveinherited

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

Properties:

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

pointerType String Indicates the pointer type. Possible Values: mouse | touch

x Number The horizontal screen coordinate of the pointer on the view.

y Number The vertical screen coordinate of the pointer on the view.

button Number Indicates which mouse button was clicked.

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

type String 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-moveinherited

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

Properties:

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

pointerType String Indicates the pointer type. Possible Values: mouse | touch

x Number The horizontal screen coordinate of the pointer on the view.

y Number The vertical screen coordinate of the pointer on the view.

button Number Indicates which mouse button was clicked.

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

type String 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-upinherited

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

Properties:

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

pointerType String Indicates the pointer type. Possible Values: mouse | touch

x Number The horizontal screen coordinate of the pointer on the view.

y Number The vertical screen coordinate of the pointer on the view.

button Number Indicates which mouse button was clicked.

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

type String 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.

resizeinherited

Fires when the view's size changes.

Properties:

oldWidth Number The previous view width in pixels

oldHeight Number The previous view height in pixels

width Number The new measured view width in pixels

height Number The new measured view height in pixels

See also:

• size
• height
• width