MapView | References | ArcGIS Maps SDK for JavaScript

import MapView from "@arcgis/core/views/MapView.js";

Inheritance:: MapView→View2D→View→Accessor

Since: ArcGIS Maps SDK for JavaScript 4.0

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)
const view = new MapView({
  map: myMap,  // References a Map instance
  container: "viewDiv",  // References the ID of a DOM element
  center: [-100, 35], // Sets the center point of the view at a specified lon/lat
});

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,000 scale on the view

A MapView may not be immediately ready for display after it has been constructed. For example, map data may need to be loaded first to determine the spatialReference of the view, or the DOM container may not yet have a non-zero size. Many of the view methods (such as hitTest() or goTo()) need the view to be ready before they can be used.

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

view.when(function() {
  // MapView is now ready for display and can be used. Here we will
  // use goTo to view a particular location at a given zoom level and center
  view.goTo({
    center: [-112, 38],
    zoom: 12
  });
})
.catch(function(err) {
  // A rejected view indicates a fatal error making it unable to display.
  // Use the errback function to handle when the view doesn't load properly
  console.error("MapView rejected:", err);
});

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

Programmatic navigation

You can set the initial extent (or visible portion of the map) by using either a combination of center and scale or zoom, or by setting the extent or viewpoint property in the MapView's constructor.

Because some view properties override one another, there is a set priority in which these properties are applied during construction of the view. When initialized, the MapView requires a center and scale, and optionally a rotation. Center and scale are derived from several properties: center, zoom, scale, extent or a viewpoint. Both center and scale can be derived from extent and viewpoint. If all properties are set in the constructor, they will be applied in the order they are defined. For example, a scale is derived from an extent, so setting scale after the extent overrides the derived value, while the center derived from the extent's center remains the same. 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

const view = new MapView({
  map: map,
  container: "viewDiv",
  zoom: 10,
  extent: initialExtent, // will override zoom
  // map will be centered at [0,0], but the scale from initialExtent will be used
  center: [0,0]
});

Notes

If the spatial reference of the center, extent or viewpoint.targetGeometry set in the constructor does not match the spatialReference of the view, then projectOperator will be loaded dynamically.
At runtime, the projectOperator must be loaded when setting the center, extent or viewpoint to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is loaded prior to setting these properties by calling isLoaded(). If it is not yet loaded, you can call load().

// Create a map with Antarctic imagery basemap
const map = new Map({
  basemap: new Basemap({
    portalItem: {
      id: "6553466517dd4d5e8b0c518b8d6b64cb" // Antarctic Imagery
    }
  });
});

// Set the center and zoom level on the view.
// In this case, the view's spatial reference wkid is 3031
// center is lat/long. The projectOperator will be loaded dynamically
// to project the center to match the spatial reference of the view
const view = new MapView({
  map: map,  // References a Map instance
  container: "viewDiv",  // References the ID of a DOM element
  center: [-100, 35], // Sets the center point of the view at a specified lon/lat
  zoom: 3 // MapView converts this to its corresponding scale which is 112823780.660964
});

// Sets the center point of the view at a specified lon/lat
view.center = [-112, 38];
view.zoom = 13;  // Sets the zoom LOD to 13

// new extent for the mapview where the spatialReference.wkid is 4326
const extent = new Extent({
  xmin: -9177882,
  ymin: 4246761,
  xmax: -9176720,
  ymax: 4247967,
  spatialReference: {
    wkid: 102100
  }
});

if (!projectOperator.isLoaded()) {
  await projectOperator.load();
}
view.extent = extent;

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.

Zoom and LODs

Why doesn't setting zoom always work and why is its value -1? This section explains how MapView zoom and LODs work. The map's Map.basemap defines the MapView's effectiveLODs when the view is loaded. A LOD has a scale and corresponding zoom value which can be used to navigate the map. If the MapView has valid effectiveLODs, the zoom value can be set on the MapView. In this case, the view converts it the corresponding scale, or interpolates it if the zoom is a fractional number.

The MapView's constraints.effectiveLODs will be null if the following statements are true:

The map doesn't have a basemap, or
the basemap does not have a TileInfo,
AND the first layer added to the map does not have a TileInfo.

If the effectiveLODs are null, it is not possible to set zoom on the MapView because the conversion is not possible. The zoom value will be -1 in this case. Setting scale will work. To address this, the MapView's constraints.lods can be defined at the time of its initialization by calling TileInfo.create().lods.

const layer = new FeatureLayer({
  url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/World_Countries_(Generalized)/FeatureServer/0"
});

// initialize the map without basemap, just add the feature layer to the map
// feature layer does not have tileInfo to derive effectiveLODs from
const map = new Map({
  layers: [layer]
});

// Create a tileInfo instance using the default settings and pass its
// resulting LODs to a MapView's constraints.lods.
const view = new MapView({
  container: "viewDiv",
  map: map,
  zoom: 3, // this will work because we are creating LODs. Otherwise, it will not work
  constraints: {
    lods: TileInfo.create({
      // create the LODs to match the spatial reference of the view
      spatialReference: viewSpatialReference
    }).lods
  },
  spatialReference: viewSpatialReference
});

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
Ctrl+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 the extent of the 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
Drag with one or multiple fingers	Pan
Double-tap with one finger Zoom	Pan at the finger position
Two finger pinch in/out	Zoom out/in
Move two fingers in clockwise or counterclockwise direction	Rotate

VoiceOver users may want to turn off quick nav mode to get the full experience by pressing the left arrow and right arrow keys at the same time.

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 Disable view navigation sample.

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). To enable zooming in MapView, view.constraints.snapToZoom must be set to false (default is true). Please see GamepadInputDevice for supported devices.

Gamepad

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.

Notes:

Zoom snapping must be disabled for continuous zooming. In MapView, snapToZoom is true by default.
Per W3C Working Draft 29 October 2020, gamepad functionality may not be available on some or all browsers if the web application is hosted on a non-secure context (e.g. http rather than https). Future versions of the ArcGIS Maps SDK for JavaScript may explicitly disable gamepad capabilities on non-secure contexts.

Handling events

When users interact with the MapView, their actions trigger events that you can listen and respond to. For example, you can listen when a user moves the mouse over the map and display the coordinates at the mouse location. This is called a @pointer-move event. See the MapView events section for a list of all the events.

It is important to note that some events are dependent on each other and the timing of the user interaction can influence the type of event that gets triggered. For example, a single click triggers a series of events: @pointer-down when the user presses the mouse button, @pointer-up when they release the mouse button. An @immediate-click event gets triggered right after the @pointer-up event. @immediate-click should be used for responding to user interaction without delay. The @click event is only triggered after making sure that the user doesn't click a second time (in which case it would trigger a @double-click event).

Various events

In the case of a double-click, the same event chain is repeated after the first click. However, if the user clicks a second time within a close time range, then the @click event is not emitted anymore, but the @pointer-down, @pointer-up and @immediate-click events are triggered again. After two @immediate-click events, a @double-click event gets triggered along with an @immediate-double-click event. The difference between the two is that an @immediate-double-click cannot be prevented by the use of stopPropagation on the @immediate-click event and can therefore be used to react to double-clicking independently of usage of the @immediate-click event.

These events are also used internally for navigation, popups or different interactive tools like measurement or sketch. In some use cases, adding additional event listeners might interfere with the default event listeners. For example, adding an immediate-click event to open up a popup, will interfere with the default click event that also opens up a popup.

See the Event explorer sample, to visualize the different events that get triggered when you interact with the view.

See also

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	`MapViewProperties`

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

Example

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

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
`views` readonly inherited static	`Collection<View<any>>`	View
`allLayerViews` readonly inherited	`ReadonlyCollection`	View
`analyses` inherited	`Collection<Analysis>`	View2D
`animation` inherited	`ViewAnimation \| null \| undefined`	View2D
`animationsEnabled` inherited	`boolean`	View
`aria` inherited	`DOMContainerAria`	DOMContainer
`attributionHeight` readonly inherited	`number`	DOMContainer
`attributionItems` readonly inherited	`ReadonlyArray<AttributionItem>`	View
`attributionMode` inherited	`"dark" \| "light" \| null \| undefined`	DOMContainer
`attributionVisible` inherited	`boolean`	View
`background` inherited	`ColorBackground \| null \| undefined`	View2D
`basemapView` inherited	`BasemapView`	View
`breakpoints` inherited	`Breakpoints`	BreakpointsOwner
`canZoomIn` readonly inherited	`boolean`	View
`canZoomOut` readonly inherited	`boolean`	View
`center` inherited	`Point`	View2D
`constraints` inherited	`MapViewConstraints`	View2D
`container` inherited	`HTMLDivElement \| null \| undefined`	DOMContainer
`declaredClass` readonly inherited	`string`	Accessor
`displayFilterEnabled` inherited	`boolean`	View
`extent` inherited	`Extent`	View2D
`fatalError` inherited	`EsriError \| null \| undefined`	View
`floors` inherited	`Collection<string>`	View2D
`focused` readonly inherited	`boolean`	DOMContainer
`graphics` inherited	`Collection<Graphic>`	View
`height` readonly inherited	`number`	DOMContainer
`heightBreakpoint` inherited	`BreakpointSize`	BreakpointsOwner
`highlights` inherited	`Collection<HighlightOptions>`	View
`input` readonly inherited	`Input`	View
`interacting` readonly inherited	`boolean`	View
`layerViews` readonly inherited	`Collection`	View
`magnifier` readonly inherited	`Magnifier`	View
`map` inherited	`EsriMap \| null \| undefined`	View
`navigating` readonly inherited	`boolean`	View
`navigation` inherited	`Navigation`	View
`orientation` readonly inherited	`BreakpointOrientation`	BreakpointsOwner
`padding` inherited	`ViewPadding`	View
`popup` inherited	`Popup \| null \| undefined`	PopupView
`popupEnabled` inherited	`boolean`	PopupView
`ready` readonly inherited	`boolean`	View
`readyState` readonly inherited	`"loading" \| "missing-map" \| "missing-container" \| "empty-map" \| "map-content-error" \| "rendering-error" \| "ready"`	View
`resizeAlign` inherited	`ResizeAlign`	View2D
`resizing` readonly inherited	`boolean`	DOMContainer
`resolution` readonly inherited	`number`	View2D
`rotation` inherited	`number`	View2D
`scale` inherited	`number`	View2D
`selectionManager` readonly inherited	`SelectionManager`	View
`size` readonly inherited	`[ number, number ]`	DOMContainer
`spatialReference` inherited	`SpatialReference`	View2D
`spatialReferenceLocked` inherited	`boolean`	View2D
`stationary` readonly inherited	`boolean`	View
`suspended` readonly inherited	`boolean`	DOMContainer
`theme` inherited	`Theme \| null \| undefined`	View
`tileInfo` readonly inherited	`TileInfo \| null \| undefined`	View2D
`timeExtent` inherited	`TimeExtent \| null \| undefined`	View
`timeZone` inherited	`TimeZone`	View2D
`type` readonly inherited	`"2d"`	View2D
`ui` inherited	`DefaultUI`	DOMContainer
`updating` readonly inherited	`boolean`	View
`viewpoint` inherited	`Viewpoint`	View2D
`visibleArea` readonly inherited	`Polygon \| null \| undefined`	View2D
`width` readonly inherited	`number`	DOMContainer
`widthBreakpoint` inherited	`BreakpointSize`	BreakpointsOwner
`zoom` inherited	`number`	View2D

views

readonlyinheritedstatic Property

Type: Collection<View<any>>

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 4.11

Contains the collection of active views on the page. Only views that are ready appear in the collection.

allLayerViews

readonlyinherited Property

Type: ReadonlyCollection

Inherited from: View

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

analyses

autocast inherited Property

Type: Collection<Analysis>

Inherited from: View2D

Since: ArcGIS Maps SDK for JavaScript 4.34

A collection of analyses associated with the view.

Examples

// Adds an analysis to the View
view.analyses.add(elevationProfileAnalysis);

// Removes an analysis from the View
view.analyses.remove(elevationProfileAnalysis);

animation

inherited Property

Type: ViewAnimation | null | undefined

Inherited from: View2D

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

See also

Example

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

animationsEnabled

inherited Property

Type: boolean

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 4.34

Indicates whether animations are enabled in the view. This includes animated symbols (animated CIMSymbol, PictureMarkerSymbol from a GIF/animated PNG), animated renderers (FlowRenderer), animated layers (MediaLayer, VideoLayer), and animations triggered by view navigation (for example, MapView.goTo()). Setting this property to false disables all animations in the view.

Default value: true

aria

inherited Property

Type: DOMContainerAria

Inherited from: DOMContainer

Since: ArcGIS Maps SDK for JavaScript 4.34

The ARIA attributes for the view container.

See also

attributionHeight

readonlyinherited Property

Type: number

Inherited from: DOMContainer

Since: ArcGIS Maps SDK for JavaScript 5.0

The height of the attribution in pixels. The value is practical to adjust the bottom padding of other UI elements. The value changes when the attribution is expanded or collapsed.

attributionItems

readonlyinherited Property

Type: ReadonlyArray<AttributionItem>

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 5.0

The array of attribution items to be displayed in the view's attribution. This property is populated once the view has finished updating. Items are ordered based on descending score with higher scored items appearing first in the attribution.

attribution

Example

// Access the attributionItems property after the view is finished updating to get the array of attribution items to be displayed in the view's attribution
reactiveUtils.when(
  () => !view.updating,
  () => {
    const attributionText = view.attributionItems
      .map((item) => item.text)
      .join(" | ");
    console.log(attributionText);
  }
);

attributionMode

inherited Property

Type: "dark" | "light" | null | undefined

Inherited from: DOMContainer

Since: ArcGIS Maps SDK for JavaScript 5.0

The light or dark mode used to display the attribution. By default, the mode is inherited from the Calcite's mode. You can override the value to style the attribution alongside the map or scene content.

attributionVisible

inherited Property

Type: boolean

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether the attribution is visible in the view.

Esri requires that when you use an ArcGIS Online basemap in your app, the map must include Esri attribution and you must be licensed to use the content. For detailed guidelines on working with attribution, please visit the official attribution in your app documentation. For information, see the Terms of Use documentation.

Default value: true

background

autocast inherited Property

Type: ColorBackground | null | undefined

Inherited from: View2D

The background color of the view. If the view's map changes, the view's background is reset to the map's background, even if the user set it previously.

Example

let view = new MapView({
  container: "viewDiv",
  map: map,
  background: { // autocasts new ColorBackground()
    color: "magenta" // autocasts as new Color()
  }
});

basemapView

inherited Property

Type: BasemapView

Inherited from: View

Represents the view for a single basemap after it has been added to the map.

breakpoints

inherited Property

Type: Breakpoints

Inherited from: BreakpointsOwner

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.

See also

Example

// Instead of watching the size or resizing properties
reactiveUtils.watch(() => view.size, () => {});
reactiveUtils.watch(() => view.resizing, () => {});

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

canZoomIn

readonlyinherited Property

Type: boolean

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates if the view can zoom in.

canZoomOut

readonlyinherited Property

Type: boolean

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates if the view can zoom out.

center

autocast inherited Property

Type: Point

Inherited from: View2D

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 MapView.goTo().

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

Notes

If the spatial reference of center set in the constructor does not match the spatialReference of the view, then projectOperator will be loaded dynamically.
At runtime, the projectOperator must be loaded when setting the center to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is loaded prior to setting the center by calling isLoaded(). If it is not yet loaded, you can call load().

See also

MapView.goTo()

Examples

// Sets the initial center point of the view to lon/lat coordinates
// lon/lat will be projected to match the spatial reference of the view
let view = new MapView({
  center: [-112, 38]
});

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

const centerPoint = new Point({
  x: -8746995,
  y: 4352308,
  spatialReference: {
    wkid: 8857
  }
});
if (!projectOperator.isLoaded()) {
  await projectOperator.load();
}
view.center = centerPoint;

constraints

autocast inherited Property

Type: MapViewConstraints

Inherited from: View2D

Specifies constraints to scale, zoom, and rotation that may be applied to the MapView. The constraints.lods should be set in the MapView constructor, if the map does not have a basemap or when the basemap does not have TileInfo.

See also

Examples

view.constraints = {
 geometry: { // Constrain lateral movement to Lower Manhattan
   type: "extent",
   xmin: -74.020,
   ymin:  40.700,
   xmax: -73.971,
   ymax:  40.73
 },
 minScale: 500000, // User cannot zoom out beyond a scale of 1:500,000
 maxScale: 0, // User can overzoom tiles
 rotationEnabled: false // Disables map rotation

// This snippet shows how to set the MapView scale 1:1 while generating additional LODs for the MapView.constraints.
 const spatialReference = new SpatialReference({
   wkid: 2154
 });
 const center = new Point({
   x: 0,
   y: 0,
   spatialReference
 });

 // Create LODs from level 0 to 31
 const tileInfo = TileInfo.create({
   spatialReference,
   numLODs: 32
 });
 const lods = tileInfo.lods;

 let view = new MapView({
   container: "viewDiv",
   map,
   scale: 1,
   center,
   spatialReference,
   constraints: {
     lods: lods,
     snapToZoom: false
   }
 });

container

autocast inherited Property

Type: HTMLDivElement | null | undefined

Inherited from: DOMContainer

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

Examples

// Sets container to the DOM id
let view = new MapView({
  container: "viewDiv"  // ID of the HTML element that holds the view
});

// Sets container to the node
let viewNode = document.getElementById("viewDiv");
let view = new SceneView({
  container: viewNode
});

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

Since: ArcGIS Maps SDK for JavaScript 4.7

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

displayFilterEnabled

inherited Property

Type: boolean

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 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.

Default value: true

extent

autocast inherited Property

Type: Extent

Inherited from: View2D

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 MapView.goTo(). When the view is rotated, the extent does not update to include the newly visible portions of the map.

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

Notes

If the spatial reference of extent set in the constructor does not match the spatialReference of the view, then projectOperator will be loaded dynamically.
At runtime, the projectOperator must be loaded when setting the extent to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is loaded prior to setting the extent by calling isLoaded(). If it is not yet loaded, you can call load().

See also

MapView.goTo()

Example

// the projectOperator must be loaded in the app if the spatial reference
// of the view does not match the spatial reference of the extent
const extent = new Extent({
  xmin: -13056650,
  ymin: 6077558,
  xmax: -13055709,
  ymax: 6077938,
  spatialReference: new SpatialReference({wkid:3857})
});
view.extent = extent;  // Updates the view without animation

fatalError

inherited Property

Type: EsriError | null | undefined

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 4.12

A fatal Error returned when the view loses its WebGL context. watch() this property to properly handle the error and attempt to recover the WebGL context.

See also

tryFatalErrorRecovery()

Example

reactiveUtils.when(
  () => view.fatalError,
  () => {
    console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
    view.tryFatalErrorRecovery();
  }
);

floors

autocast inherited Property

Type: Collection<string>

Inherited from: View2D

Applies a display filter on the view for a specific set of floor levels. It can filter the map display on floor-aware layers by zero or more level IDs.

focused

readonlyinherited Property

Type: boolean

Inherited from: DOMContainer

Since: ArcGIS Maps SDK for JavaScript 4.7

Indicates if the browser focus is on the view.

graphics

autocast inherited Property

Type: Collection<Graphic>

Inherited from: 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);

height

readonlyinherited Property

Type: number

Inherited from: DOMContainer

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

heightBreakpoint

inherited Property

Type: BreakpointSize

Inherited from: BreakpointsOwner

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 apps using CSS

Example

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

highlights

autocast inherited Property

Type: Collection<HighlightOptions>

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 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.

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 when `layerView.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 }`

See also

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

readonlyinherited Property

Type: Input

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 4.9

Options to configure input handling of the View.

Example

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

interacting

readonlyinherited Property

Type: boolean

Inherited from: View

Indication whether the view is being interacted with (for example when panning or by an interactive tool).

Default value: false

layerViews

readonlyinherited Property

Type: Collection

Inherited from: View

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

See also

LayerView

magnifier

readonlyinherited Property

Type: Magnifier

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 4.19

The magnifier allows for showing a portion of the view as a magnifier image on top of the view.

map

autocast inherited Property

Type: EsriMap | null | undefined

Inherited from: 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

readonlyinherited Property

Type: boolean

Inherited from: View

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

Default value: false

autocast inherited Property

Type: Navigation

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 4.9

Options to configure the navigation behavior of the View.

Example

// Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.
const view = new MapView({
  container: "viewDiv",
  map: new Map({
    basemap: "satellite"
  }),
  center: [176.185, -37.643],
  zoom: 13,
  navigation: {
    gamepad: {
      enabled: false
    },
    actionMap: {
      dragSecondary: "none", // Disable rotating the view with the right mouse button
      mouseWheel: "none" // Disable zooming with the mouse wheel
    },
    browserTouchPanEnabled: false,
    momentumEnabled: false,
  }
});

orientation

readonlyinherited Property

Type: BreakpointOrientation

Inherited from: BreakpointsOwner

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.

padding

inherited Property

Type: ViewPadding

Inherited from: View

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.

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

autocast inherited Property

Type: Popup | null | undefined

Inherited from: PopupView

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

By default, the popup property is an empty object that allows you to set the popup options. A Popup instance is automatically created and assigned to the view's popup when the user clicks on the view and popupEnabled is true, when the openPopup method is called, or when some widgets need the popup, such as Search. If popup is null, the popup instance will not be created.

See also

Examples

// Set the view's popup to a new Popup instance.
// The popup will show anytime a popup is called such as when selecting features or displaying a Search result.
view.popup = new Popup();

// Set the popup to a PopupOptions object with popup properties set such as the dock options.
// The popup will show anytime a popup is called.
view.popup = {
 dockEnabled: true,
 dockOptions: {
   position: "top-left",
   breakpoint: false
 }
};

// Set the popup to null. This disables the popup so it will never show up.
view.popup = null;

popupEnabled

inherited Property

Type: boolean

Inherited from: PopupView

Since: ArcGIS Maps SDK for JavaScript 4.27

Controls whether the popup opens when users click on the view.

When true, a Popup instance is created and assigned to popup the first time the user clicks on the view, unless popup is null. The popup then processes the click event.

When false, the click event is ignored and popup is not created for features but will open for other scenarios that use a popup, such as displaying Search results.

See also

Default value: true

Example

// Disable the popup from automatically appearing and
// open the popup manually using a click event.
view.popupEnabled = false;
view.on("click", (event)=> {
  view.openPopup({
    // Set properties for the manually opened popup
    ...
  });
});

ready

readonlyinherited Property

Type: boolean

Inherited from: View

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

The view has a map. If map is a WebMap or a WebScene, then the map or scene must be loaded.
The view has a container with a size greater than 0.
The view has a spatialReference, a center, and a scale. These also can be inferred by setting an extent.

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

See also

when()

Default value: false

readyState

readonlyinherited Property

Type: "loading" | "missing-map" | "missing-container" | "empty-map" | "map-content-error" | "rendering-error" | "ready"

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 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	Description
`loading`	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`.

Default value: "loading"

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

resizeAlign

inherited Property

Type: ResizeAlign

Inherited from: View2D

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.

Default value: "center"

resizing

readonlyinherited Property

Type: boolean

Inherited from: DOMContainer

Indicates whether the view is being resized.

Default value: false

resolution

readonlyinherited Property

Type: number

Inherited from: View2D

Since: ArcGIS Maps SDK 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.

rotation

inherited Property

Type: number

Inherited from: View2D

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

scale

inherited Property

Type: number

Inherited from: View2D

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

See also

Example

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

selectionManager

readonlyinherited Property

Type: SelectionManager

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 5.0

beta

The default SelectionManager for this view. Used to manage selections of features across layers.

size

readonlyinherited Property

Type: [ number, number ]

Inherited from: DOMContainer

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

spatialReference

autocast inherited Property

Type: SpatialReference

Inherited from: View2D

The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map. Starting at version 4.23, you can change the spatialReference of the MapView after it is initialized by either directly changing this property, or by changing the basemap from the BasemapGallery or BasemapToggle widgets. Set MapView's spatialReferenceLocked property to true to prevent users from changing the view's spatial reference at runtime.

Prior to changing the spatial reference, check if the projectOperator is loaded by calling isLoaded(). If it is not yet loaded, call load() method. If the projectOperator is not loaded, the view's center will default to [0, 0] in the new spatial reference of the view and a console error will be thrown.

Notes

LayerViews not compatible with the view's spatial reference are not displayed. In such case, the layer view's suspended property is true and spatialReferenceSupported property is false.
When setting view's spatial reference, the center, extent or viewpoint.targetGeometry properties are projected to the new spatial reference. The scale and rotation properties are adjusted to keep the content of the map at the same size and orientation on screen.
To ensure TileLayers and VectorTileLayers are displayed in a basemap correctly, the spatialReference of the MapView must be set match their tileInfo's spatial reference.
Switching spatial reference with an imageCoordinateSystem is not supported.

See also

spatialReferenceLocked

Examples

// check if the projectOperator is loaded
if (!projectOperator.isLoaded()) {
  projectOperator.load().then(() => {
   // change the spatial reference of the view to equal earth projection
    view.spatialReference = new SpatialReference({
      wkid: 54035 //equal earth projection
    });
  });
} else {
  // the projectOperator is already loaded.
  // change the spatial reference of the view to equal earth projection
  view.spatialReference = new SpatialReference({
    wkid: 54035 //equal earth projection
  });
}

const basemap = await changeBasemap();
const spatialReference = await findSpatialReference(basemap);

// check if basemap has the same spatial reference as the view if they are not equal
// then check if the projectOperator is loaded, and load the projectOperator if it is not loaded.
// If loaded, then simply change view.spatialReference to match the basemap spatialReference
if (spatialReference && !view.spatialReference.equals(spatialReference)) {
  if (!projectOperator.isLoaded()) {
    await projectOperator.load();
  }
  view.spatialReference = spatialReference;
}

// change the basemap
map.basemap = basemap;

async function changeBasemap() {
  let basemap;
  if (map.basemap.title === "OpenStreetMap Vector Basemap (Blueprint - WGS84)"){
    basemap = new Basemap({
      portalItem: { // Spilhaus - one ocean basemap
        id: "5639ccf22d4c4830ab815c4f9c9319bb"
      }
    });
  } else {
    basemap = osm84;
  }
  return basemap;
}

async function findSpatialReference(basemap) {
  await basemap.load();

  if (basemap.spatialReference) {
    return basemap.spatialReference;
  }

  const layer = basemap.baseLayers.at(0);

  if (!layer) {
    return null;
  }

  await layer.load();

  return layer.spatialReference;
}

spatialReferenceLocked

inherited Property

Type: boolean

Inherited from: View2D

Indicates if the MapView's spatialReference can be changed after it is ready. The default is false indicating the view's spatialReference can be changed at runtime. When true, basemaps with spatial references that do not match the MapView's spatial reference will be disabled in BasemapGallery and BasemapToggle widgets and the view spatialReference cannot be changed at runtime.

See also

spatialReference

Default value: false

stationary

readonlyinherited Property

Type: boolean

Inherited from: View

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

suspended

readonlyinherited Property

Type: boolean

Inherited from: DOMContainer

Indicates if the view is visible on the page. When true, the view is not visible and it stops rendering and updating data. Set to true when one of the following conditions are met:

if the view does not have a container,
if the view's height or width equal to 0,
if the view container's css style display is set to none (display:none).

When the view container's css style visibility is set to hidden, this property is set to false, and the view is hidden but it stills renders and updates data.

Default value: true

theme

autocast inherited Property

Type: Theme | null | undefined

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 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.

See also

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

tileInfo

readonlyinherited Property

Type: TileInfo | null | undefined

Inherited from: View2D

The tiling scheme information of the view.

timeExtent

autocast inherited Property

Type: TimeExtent | null | undefined

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 4.12

The view's time extent. Time-aware layers display their temporal data that falls within the view's time extent. Setting the view's time extent is similar to setting the spatial extent because once the time extent is set, the view updates automatically to conform to the change.

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

timeZone

inherited Property

Type: TimeZone

Inherited from: View2D

Defines the time zone of the view. The time zone property determines how dates and times are represented to the user, but the underlying data is unchanged. Changing the time zone will have the following effect:

Arcade: Arcade expressions referencing date values in labels, renderers, and forms will represent dates by default in the time zone of the view. When the view time zone is changed, the output of Arcade expressions working with dates may change to match the time zone of the view. The user can use the ChangeTimeZone Arcade function (e.g. ChangeTimeZone($feature.dateField, "system")) to display dates in another time zone regardless of web map time zone. Alternatively they can construct Date values in the context of a specific time zone (e.g. Date(2013, 1, 1, 10, 00, 00, 00, "UTC")).
Components/widgets: Date values, including values from date and timestamp-offset fields, will be displayed in the view's time zone by default in the following components/widgets: Bookmarks, Editor, Feature, FeatureForm, Features, FeatureTable, Legend, Popup and TimeSlider.

The time zone can be set to one of the following values:

Possible Values

Value	Description
system	Dates and times will be displayed in the time zone of the device or browser.
unknown	Dates and times will be displayed based on the time zone that has been defined for the layer. No adjustments are made to the display of date info. TimeSlider is disabled.
Specified IANA time zone	Dates and times will be displayed in the specified IANA time zone. See wikipedia - List of tz database time zones.

If the timeZone is set to unknown and a layer’s date/time field includes time information, set the DateTimeFieldFormat.timeStyle property to either long or full on the corresponding date/time field.

See also

wikipedia - List of tz database time zones

Default value: "system"

Example

// Date and time will be displayed in Pacific/Auckland (NZ) time zone
const view = new MapView({
  map: map,
  container: "viewDiv",
  timeZone: "Pacific/Auckland"
});

type

readonlyinherited Property

Type: "2d"

Inherited from: View2D

The dimension of the view.

ui

autocast inherited Property

Type: DefaultUI

Inherited from: DOMContainer

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

Examples

let toggle = new BasemapToggle({
  view: view,
  nextBasemap: "hybrid"
});
// Adds an instance of BasemapToggle widget to the
// top right of the view.
view.ui.add(toggle, "top-right");

// Moves the zoom and BasemapToggle widgets to the
// bottom left of the view.
view.ui.move([ "zoom", toggle ], "bottom-left");

// Removes all the widgets from the bottom left of the view
view.ui.empty("bottom-left");

// Removes the compass widget from the view
view.ui.remove("compass");

// Removes all default UI components, except Attribution.
// Passing an empty array will remove all components.
view.ui.components = [ "attribution" ];

updating

readonlyinherited Property

Type: boolean

Inherited from: View

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

Default value: false

viewpoint

autocast inherited Property

Type: Viewpoint

Inherited from: View2D

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 MapView.goTo().

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

Notes

If the spatial reference of viewpoint set in the constructor does not match the spatialReference of the view, then projectOperator will be loaded dynamically.
At runtime, the projectOperator must be loaded when setting the viewPoint to a spatial reference that doesn't match the view spatial reference. You can check if the projectOperator is loaded prior to setting the center by calling isLoaded(). If it is not yet loaded, you can call load().

See also

MapView.goTo()

visibleArea

readonlyinherited Property

Type: Polygon | null | undefined

Inherited from: View2D

Since: ArcGIS Maps SDK for JavaScript 4.31

The visibleArea represents the visible portion of a Map within the view as an instance of a Polygon. This is similar to the view MapView.extent but is a more accurate representation of the visible area especially when the view is rotated. An example use of the visible area is to spatially filter visible features in a layer view query.

See also

MapView.extent

width

readonlyinherited Property

Type: number

Inherited from: DOMContainer

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

widthBreakpoint

inherited Property

Type: BreakpointSize

Inherited from: BreakpointsOwner

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 apps using CSS

Example

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

zoom

inherited Property

Type: number

Inherited from: View2D

Represents the level of detail (LOD) at the center of the view. A zoom level or scale is a number that defines how large or small the contents of a map appear in a map view. Zoom level is a number usually between 0 (global view) and 23 (very detailed view) and is used as a shorthand for predetermined scale values. A value of -1 means the view has no LODs. When setting the zoom value, map view converts it to the corresponding scale, or interpolates it if the zoom is a fractional number. MapView can display maps with different spatialReference projections at a full range of scales, and so use scale rather than zoom level.

Setting the zoom immediately changes the current view. For animating the view, see MapView.goTo(). Setting this property in conjunction with center is a convenient way to set the initial extent of the view.

See also

Examples

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

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

Methods

Method	Signature	Class
`closePopup` inherited	`closePopup(): void`	PopupView
`destroy` inherited	`destroy(): void`	View
`emit` inherited	`emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean`	EventedMixin
`focus` inherited	`focus(): void`	DOMContainer
`goTo` inherited	`goTo(target: GoToTarget2D, options?: GoToOptions2D): Promise<void>`	View2D
`hasEventListener` inherited	`hasEventListener<Type extends EventNames<this>>(type: Type): boolean`	EventedMixin
`hitTest`	`hitTest(screenPoint: ScreenPoint \| MouseEvent, options?: HitTestOptions): Promise<ViewHitTestResult>`
`isFulfilled` inherited	`isFulfilled(): boolean`	EsriPromiseMixin
`isRejected` inherited	`isRejected(): boolean`	EsriPromiseMixin
`isResolved` inherited	`isResolved(): boolean`	EsriPromiseMixin
`on` inherited	`on<Type extends EventNames<this>>(type: Type, listener: (event: this["@eventTypes"][Type]) => void): ResourceHandle`	Viewport2DMixin
`on` inherited	`on<Type extends EventNames<this>>(type: Type, modifiers: string[], listener: (event: this["@eventTypes"][Type]) => void): ResourceHandle`	Viewport2DMixin
`openPopup` inherited	`openPopup(options?: ViewPopupOpenOptions): Promise<void>`	PopupView
`takeScreenshot`	`takeScreenshot(options?: Partial<UserSettings>): Promise<Screenshot>`
`toMap` inherited	`toMap(screenPoint: ScreenPoint \| MouseEvent): Point`	View2D
`toScreen` inherited	`toScreen(point: Point, options?: ToScreenOptions2D): ScreenPoint \| null \| undefined`	View2D
`tryFatalErrorRecovery` inherited	`tryFatalErrorRecovery(): void`	View
`when` inherited	`when<TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> \| null \| undefined, onRejected?: OnRejectedCallback<TResult2> \| null \| undefined): Promise<TResult1 \| TResult2>`	EsriPromiseMixin
`whenAnalysisView` inherited	`whenAnalysisView(analysis: ElevationProfileAnalysis): Promise<ElevationProfileAnalysisView2D>`	View2D
`whenAnalysisView` inherited	`whenAnalysisView(analysis: Analysis): Promise<AnalysisView2DUnion>`	View2D
`whenLayerView` inherited	`whenLayerView<TLayer extends Layer>(layer: TLayer): Promise<LayerView2DFor<TLayer>>`	View2D
`zoomIn` inherited	`zoomIn(): Promise<void>`	View2D
`zoomOut` inherited	`zoomOut(): Promise<void>`	View2D

closePopup

inherited Method

Signature: closePopup (): void

Inherited from: PopupView

Since: ArcGIS Maps SDK for JavaScript 4.27

Closes the popup.

See also

Returns: void

Example

// Closes the popup if it's open
if(view.popup.visible){
 view.closePopup();
}

destroy

inherited Method

Signature: destroy (): void

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 4.17

Destroys the view, and any associated resources, including its map, popup, and ui elements. These can no longer be used once the view has been destroyed. To prevent these components from being destroyed, remove them from the view before calling destroy().

// remove popup and legend from the view so that they are not destroyed
const popup = view.popup;
view.popup = null;
view.ui.remove(legend);

// unset map from the view so that it is not destroyed
const map = view.map;
view.map = null;

// destroy the view and any remaining associated resources
view.destroy();

See also

Returns: void

emit

inherited Method

Signature: emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Since: ArcGIS Maps SDK for JavaScript 4.5

Emits an event on the instance. This method should only be used when creating subclasses of this class.

Parameters

Parameter	Type	Description	Required
type	`Type`	The name of the event.
event	`this["@eventTypes"][Type]`	The event payload.

Returns: boolean
true if a listener was notified

focus

inherited Method

Signature: focus (): void

Inherited from: DOMContainer

Since: ArcGIS Maps SDK for JavaScript 4.5

Sets the focus on the view.

Returns: void

goTo

inherited Method

Signature: goTo (target: GoToTarget2D, options?: GoToOptions2D): Promise<void>

Inherited from: View2D

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, scale and rotation 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 setting the view to the new target fails, the promise returned by the goTo() method rejects with an error. Use a catch statement, to handle the error:

view.goTo({
  center: [-126, 49]
})
.catch(function(error) {
  if (error.name != "AbortError") {
     console.error(error);
  }
});

If a tiled map service is used as the basemap and snapToZoom property is set to true in constraints, the goTo method will zoom in to fit the defined target. If snapToZoom property is set to false, the goTo method will zoom to the exact target.

The goTo method now respects the user's preference for reduced motion. By default, goTo() will animate, but when the user expresses a preference for reduced motion, goTo() will navigate to the specified target without animation. It is possible to override the user's preference for reduced motion by configuring esriConfig.respectPrefersReducedMotion or on a per-call basis by specifying the animate property. However, if you override the user's preference for reduced motion, you should consider slowing down animations by adjusting the speedFactor or duration in the options parameter, or provide users with a way to slow down or stop the animation. Refer to implementing reduced motion in your applications for more information.

Parameters

Parameter	Type	Description	Required
target	`GoToTarget2D`	The target location/viewpoint to animate to. When using an object for `target`, use the properties in GoToTarget2D.
options	`GoToOptions2D`	Animation options for controlling the duration and easing of the animation. See the properties defined in GoToOptions2D for object specifications.

Returns: Promise<void>
A promise that resolves when the view's extent updates to the extent defined in target.

Examples

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

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

let 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

inherited Method

Signature: hasEventListener <Type extends EventNames<this>>(type: Type): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

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

Parameters

Parameter	Type	Description	Required
type	`Type`	The name of the event.

Returns: boolean
Returns true if the class supports the input event.

hitTest

Method

Signature: hitTest (screenPoint: ScreenPoint | MouseEvent, options?: HitTestOptions): Promise<ViewHitTestResult>

Returns hit test results from each layer that intersects the specified screen coordinates. The results are organized as an array of objects containing different result types.

The following layer types will return all features if a hit is made on intersecting features: FeatureLayer, CSVLayer, GeoJSONLayer, GeoRSSLayer, GraphicsLayer, KMLLayer, MapNotesLayer, OGCFeatureLayer, StreamLayer, SubtypeSublayer, VectorTileLayer, and WFSLayer.

The VectorTileLayer hit test result contains an array of objects containing a graphic. The graphic returns attributes of a style layer. In addition, the graphic's origin contains the style layer's id and layer index within the vector tile style. Spatial information about the actual feature represented in the style layer is returned only if the style layer is a symbol layer. Otherwise, the graphic's geometry is null.

The MediaLayer hit test result contains all media elements if the hit is made on intersecting elements. The RouteLayer hit test result contains all route elements if the hit is made on intersecting elements.

If the Polygon feature's symbol style is set to "none", the hitTest method will not return results when the fill is clicked. However, it will return results when the outline is clicked. To get results when clicking the fill, set the SimpleFillSymbol.color to a transparent color instead.

Release-specific changes:

At version 4.34, the ParquetLayer hit result returns only the topmost feature when the hit occurs on overlapping features in a ParquetLayer.
At version 4.29, ViewHitTestResult returns a result for all style layers from VectorTileLayers that intersect the hit location. In prior releases, only the top most style layer result was returned. The hit test result returns attributes of style layers. The layerId and layerIndex information of the style layer is now returned in the graphic's origin property.
At version 4.24, ViewHitTestResult returns an array of objects containing graphic, media element, and route.
At version 4.23, all hit test features from feature layers are returned in the result. In prior releases, only the top most feature was returned.
At version 4.6, support for VectorTileLayer was added.

See also

Sample: Access features with hitTest

Parameters

Parameter	Type	Description	Required
screenPoint	`ScreenPoint \| MouseEvent`	The screen coordinates (or native mouse event) of the click on the view.
options	`HitTestOptions`	Options to specify what is included in or excluded from the hitTest. Supported since 4.16.

Returns: Promise<ViewHitTestResult>
When resolved, returns an array of objects containing different result types.

Examples

// Get the screen point from the view's click event
view.on("click", (event) => {
  // Search for all features only on included layers at the clicked location
  view.hitTest(event, { include: [csvLayer, featureLayer] }).then((response) => {
    // if features are returned from the featureLayer, do something with results
    if (response.results.length) {
      response.results.forEach((result) => {
        if (result.graphic) {
          if (isFeatureGraphicOrigin(result.graphic.origin)) {
            console.log(result.graphic.origin.layer.title);
          } else if (isCSVGraphicOrigin(result.graphic.origin)) {
            console.log(result.graphic.origin.layer.longitudeField);
          }
        }
      });
    }
  });
});

// Get the screen point from the view's pointer-move event
view.on("pointer-move", (event) => {
  // Search for graphics on layers at the hovered location
  // Exclude view.graphics from the hitTest
  view.hitTest(event, { exclude: view.graphics }).then((response) => {
    // if graphics are returned, do something with results
    const graphicHits = response.results?.filter(
      (hitResult) => hitResult.type === "graphic"
    );
    if (graphicHits?.length > 0) {
       // do something
    }
  });
});

// Get the screen point from the view's click event
view.on("click", (event) => {
  // Search for all media elements only on included mediaLayer at the clicked location
  view.hitTest(event, { include: mediaLayer }).then((response) => {
    // if media elements are returned from the mediaLayer, do something with results
    if (response.results.length) {
       // do something
       console.log(response.results.length, "elements returned");
    }
  })
});

isFulfilled

inherited Method

Signature: isFulfilled (): boolean

Inherited from: EsriPromiseMixin

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: boolean
Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).

isRejected

inherited Method

Signature: isRejected (): boolean

Inherited from: EsriPromiseMixin

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

Returns: boolean
Indicates whether creating an instance of the class has been rejected.

isResolved

inherited Method

Signature: isResolved (): boolean

Inherited from: EsriPromiseMixin

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

Returns: boolean
Indicates whether creating an instance of the class has been resolved.

on

inherited Method

Signature: on <Type extends EventNames<this>>(type: Type, listener: (event: this["@eventTypes"][Type]) => void): ResourceHandle

Type parameters: <Type extends EventNames<this>>

Inherited from: Viewport2DMixin

Since: ArcGIS Maps SDK for JavaScript 5.0

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

Parameter	Type	Description	Required
type	`Type`	The name of the event or events to listen for.
listener	`(event: this["@eventTypes"][Type]) => void`	The function to call when the event is fired, if modifiers were specified.

Returns

ResourceHandle

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.

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

on

inherited Method

Signature: on <Type extends EventNames<this>>(type: Type, modifiers: string[], listener: (event: this["@eventTypes"][Type]) => void): ResourceHandle

Type parameters: <Type extends EventNames<this>>

Inherited from: Viewport2DMixin

Since: ArcGIS Maps SDK for JavaScript 5.0

Parameters

Parameter	Type	Description
type	`Type`	The name of the event or events to listen for.
modifiers	`string[]`	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`.
listener	`(event: this["@eventTypes"][Type]) => void`	The function to call when the event is fired, if modifiers were specified.

Returns

ResourceHandle

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.

openPopup

inherited Method

Signature: openPopup (options?: ViewPopupOpenOptions): Promise<void>

Inherited from: PopupView

Since: ArcGIS Maps SDK for JavaScript 4.27

Opens the popup at the given location with content defined either explicitly with content or driven from the PopupTemplate of input features. This method sets the popup's visible property to true. Users can alternatively open the popup by directly setting the visible property to true.

A Popup instance is created and assigned to popup the first time openPopup() is called, unless popup is null. The popup then processes the click event.

When calling this method, to prevent the popup from opening when clicking on the view, set popupEnabled to false to stop event propagation on the view.

The popup will only display if the view's size constraints in dockOptions are met or the location property is set to a geometry.

See also

Parameters

Parameter	Type	Description	Required
options	`ViewPopupOpenOptions`	Defines the location and content of the popup when opened.

Returns: Promise<void>
Resolves when the popup is opened. Calling openPopup() or closePopup() again rejects the Promise.

Examples

// Opens a popup manually depending on where the user clicks with specified title and content.
view.on("click", (event)=>{
  view.openPopup({
   location: event.mapPoint,
   title: "You clicked here",
   content: "This is a point of interest"
  });
});

// Opens popup at the location of the click event and displays
// content for the selected features if a popupTemplate is defined.
 view.on("click", (event)=>{
   view.openPopup({
     location: event.mapPoint,
     fetchFeatures: true
   });
 });

// Opens popup with the properties specified at the location of the click event
// and updates the popup location based on the selected feature's geometry.
view.openPopup({
  title: "You clicked here",
  content: "This is a point of interest",
  location: event.mapPoint,
  updateLocationEnabled: true
});

// Opens popup with the specified array of graphics and displays the
// features in a list (feature menu) at the location of the first graphic in the array.
view.openPopup({
  features: graphics,
  featureMenuOpen: true,
  location: graphics[0].geometry
});

takeScreenshot

Method

Signature: takeScreenshot (options?: Partial<UserSettings>): Promise<Screenshot>

Since: ArcGIS Maps SDK for JavaScript 4.10

Create a screenshot of the current view. Screenshots include only elements that are rendered on the canvas (all geographical elements), but excludes overlaid DOM elements (UI, popups, measurement labels, etc.). By default, a screenshot of the whole view is created. Different options allow for creating different types of screenshots, including taking screenshots at different aspect ratios, different resolutions and creating thumbnails.

Screenshots are always taken inside the padded area of the view (see padding).

See also

Sample - Take a screenshot of a SceneView

Parameters

Parameter	Type	Description	Required
options	`Partial<UserSettings>`	Screenshot options.

Returns: Promise<Screenshot>
When resolved, returns an object containing an encoded dataUrl and raw image data.

Examples

// Take a screenshot once view is ready (and data is displaying)
 reactiveUtils.whenOnce(() => !view.updating).then(() => {
   // Take a screenshot at the same resolution of the current view
   view.takeScreenshot().then(function(screenshot) {
     let imageElement = document.getElementById("screenshotImage");
     imageElement.src = screenshot.dataUrl;
   });
});

// Create a square thumbnail from the current view
let options = {
  width: 200,
  height: 200
};

view.takeScreenshot(options).then(function(screenshot) {
  let imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});

// Take a high resolution, square screenshot
let options = {
  width: 2048,
  height: 2048
};

view.takeScreenshot(options).then(function(screenshot) {
  let imageElement = document.getElementById("screenshotImage");
  imageElement.src = screenshot.dataUrl;
});

// Takes a high-resolution screenshot for display on a HiDPI screen
// The pixelRatio indicates the display has 2x the pixel density of typical screens
let pixelRatio = 2;
view.takeScreenshot({ width: view.width * pixelRatio, height: view.height * pixelRatio });

// Takes a high-resolution screenshot for display on a HiDPI screen
// The pixelRatio is the resolution of the display capturing the image
let pixelRatio = window.devicePixelRatio;
view.takeScreenshot({ width: view.width * pixelRatio, height: view.height * pixelRatio });

toMap

inherited Method

Signature: toMap (screenPoint: ScreenPoint | MouseEvent): Point

Inherited from: View2D

Converts the given screen point to a map point. The screen point represents a point in terms of pixels relative to the top-left corner of the view.

Parameters

Parameter	Type	Description	Required
screenPoint	`ScreenPoint \| MouseEvent`	The location on the screen (or native mouse event) to convert.

Returns: Point
The map point corresponding to the given screen point.

toScreen

inherited Method

Signature: toScreen (point: Point, options?: ToScreenOptions2D): ScreenPoint | null | undefined

Inherited from: View2D

Converts the given map point to a screen point. The screen point represents a point in terms of pixels relative to the top-left corner of the view.

Parameters

Parameter	Type	Description	Required
point	`Point`	A point geometry.
options	`ToScreenOptions2D`	Options for controlling the toScreen() calculation. See the properties defined in ToScreenOptions2D for object specifications.

Returns: ScreenPoint | null | undefined
The screen point corresponding to the given map point.

Example

// get the screen point for the specified map point.
const mapPoint = {
  x: -49.97,
  y: 41.73,
  spatialReference:{
     wkid: 4326
  }
};
const screenPoint = mapView.toScreen(mapPoint);

tryFatalErrorRecovery

inherited Method

Signature: tryFatalErrorRecovery (): void

Inherited from: View

Since: ArcGIS Maps SDK for JavaScript 4.12

Call this method to clear any fatal errors resulting from a lost WebGL context.

See also

fatalError

Returns: void

Example

reactiveUtils.when(
  () => view.fatalError,
  () => view.tryFatalErrorRecovery()
);

when

inherited Method

Signature: when <TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> | null | undefined, onRejected?: OnRejectedCallback<TResult2> | null | undefined): Promise<TResult1 | TResult2>

Type parameters: <TResult1 = this, TResult2 = never>

Inherited from: EsriPromiseMixin

Since: ArcGIS Maps SDK for JavaScript 4.6

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

Parameters

Parameter	Type	Description	Required
onFulfilled	`OnFulfilledCallback<this, TResult1> \| null \| undefined`	The function to call when the promise resolves.
onRejected	`OnRejectedCallback \| null \| undefined`	The function to execute when the promise fails.

Returns: Promise<TResult1 | TResult2>
Returns a new promise for the result of onFulfilled 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
});

whenAnalysisView

inherited Method

Signature: whenAnalysisView (analysis: ElevationProfileAnalysis): Promise<ElevationProfileAnalysisView2D>

Inherited from: View2D

Parameters

Parameter	Type	Description	Required
analysis	`ElevationProfileAnalysis`

Returns: Promise<ElevationProfileAnalysisView2D>

whenAnalysisView

inherited Method

Signature: whenAnalysisView (analysis: Analysis): Promise<AnalysisView2DUnion>

Inherited from: View2D

Since: ArcGIS Maps SDK for JavaScript 4.34

Gets the analysis view created for the given analysis object. The returned promise resolves when the view for the given analysis has been created, or rejects with an error (for example if the analysis does not belong in MapView.analyses.

Parameters

Parameter	Type	Description	Required
analysis	`Analysis`	The analysis for which to obtain the analysis view.

Returns: Promise<AnalysisView2DUnion>
Resolves to an instance of the analysis view for the provided analysis.

Example

// Create a slice analysis
let analysis = new ElevationProfileAnalysis();

// add to the view
view.analyses.add(analysis);

view.whenAnalysisView(analysis)
  .then((analysisView) => {
    // The analysis view for the analysis
  })
  .catch((error) => {
    // An error occurred during the analysis view creation
  });

whenLayerView

inherited Method

Signature: whenLayerView <TLayer extends Layer>(layer: TLayer): Promise<LayerView2DFor<TLayer>>

Type parameters: <TLayer extends Layer>

Inherited from: View2D

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).

See also

Sample - StreamLayer

Parameters

Parameter	Type	Description	Required
layer	`TLayer`	The layer for which to obtain its LayerView.

Returns: Promise<LayerView2DFor>
Resolves to an instance of LayerView for the specified layer.

Examples

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

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

zoomIn

inherited Method

Signature: zoomIn (): Promise<void>

Inherited from: View2D

Since: ArcGIS Maps SDK for JavaScript 5.0

Zooms in the view by a factor of 2.

Returns: Promise<void>
A promise that resolves when the view has been zoomed in.

zoomOut

inherited Method

Signature: zoomOut (): Promise<void>

Inherited from: View2D

Since: ArcGIS Maps SDK for JavaScript 5.0

Zooms out the view by a factor of 2.

Returns: Promise<void>
A promise that resolves when the view has been zoomed out.

Events

Name	Type
`analysis-view-create` inherited	CustomEvent<AnalysisViewCreateEvent>
`analysis-view-create-error` inherited	CustomEvent<AnalysisViewCreateErrorEvent>
`analysis-view-destroy` inherited	CustomEvent<AnalysisViewDestroyEvent>
`blur` inherited	CustomEvent<ViewBlurEvent>
`click` inherited	CustomEvent<ClickEvent>
`double-click` inherited	CustomEvent<DoubleClickEvent>
`double-tap-drag` inherited	CustomEvent<DoubleTapDragEvent>
`drag` inherited	CustomEvent<DragEvent>
`focus` inherited	CustomEvent<ViewFocusEvent>
`hold` inherited	CustomEvent<HoldEvent>
`immediate-click` inherited	CustomEvent<ImmediateClickEvent>
`immediate-double-click` inherited	CustomEvent<ImmediateDoubleClickEvent>
`key-down` inherited	CustomEvent<KeyDownEvent>
`key-up` inherited	CustomEvent<KeyUpEvent>
`layerview-create` inherited	CustomEvent<LayerViewCreateEvent>
`layerview-create-error` inherited	CustomEvent<LayerViewCreateErrorEvent>
`layerview-destroy` inherited	CustomEvent<LayerViewDestroyEvent>
`mouse-wheel` inherited	CustomEvent<ViewMouseWheelEvent>
`pointer-down` inherited	CustomEvent<PointerDownEvent>
`pointer-enter` inherited	CustomEvent<PointerEnterEvent>
`pointer-leave` inherited	CustomEvent<PointerLeaveEvent>
`pointer-move` inherited	CustomEvent<PointerMoveEvent>
`pointer-up` inherited	CustomEvent<PointerUpEvent>
`resize` inherited	CustomEvent<ViewResizeEvent>
`vertical-two-finger-drag` inherited	CustomEvent<VerticalTwoFingerDragEvent>

analysis-view-create

inherited Event

analysis-view-create: CustomEvent<AnalysisViewCreateEvent>

Inherited from: AnalysisViewEvents

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires when the view for an Analysis is created.

See also

analysis-view-create-error

inherited Event

analysis-view-create-error: CustomEvent<AnalysisViewCreateErrorEvent>

Inherited from: AnalysisViewEvents

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires when an error occurs during the creation of an Analysis after an analysis is added to the view.

See also

analysis-view-destroy

inherited Event

analysis-view-destroy: CustomEvent<AnalysisViewDestroyEvent>

Inherited from: AnalysisViewEvents

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires after an analysis view is destroyed.

blur

inherited Event

blur: CustomEvent<ViewBlurEvent>

Inherited from: ViewEventTypes

Fires when browser focus is moved away from the view.

click

inherited Event

click: CustomEvent<ClickEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires after a user clicks on the view. This event emits slightly slower than an View.@immediate-click event to make sure that a View.@double-click event isn't triggered instead. The View.@immediate-click event can be used for responding to a click event without delay.

See also

Sample: Access features with hitTest

Examples

view.on("click", function(event){
  // event is the event object returned after the event fires

  // Prints the map coordinates of the clicked location
  console.log(event.mapPoint);
});

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

inherited Event

double-click: CustomEvent<DoubleClickEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires after double-clicking on the view.

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

double-tap-drag

inherited Event

double-tap-drag: CustomEvent<DoubleTapDragEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires while the pointer is drag following a double-tap gesture on the view.

Example

view.on("double-tap-drag", (event) => {
  // Display the distance moved from the drag origin.
  console.log("x distance:", event.x, "y distance:", event.y);
});

drag

inherited Event

drag: CustomEvent<DragEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires during a pointer drag on the view.

Example

view.on("drag", function(event){
 // Print out the current state of the
 // drag event.
 console.log("drag state", event.action);
});

focus

inherited Event

focus: CustomEvent<ViewFocusEvent>

Inherited from: ViewEventTypes

Fires when browser focus is on the view.

hold

inherited Event

hold: CustomEvent<HoldEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

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

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

inherited Event

immediate-click: CustomEvent<ImmediateClickEvent>

Inherited from: ViewEventTypes

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

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

inherited Event

immediate-double-click: CustomEvent<ImmediateDoubleClickEvent>

Inherited from: ViewEventTypes

Is emitted after two consecutive View.@immediate-click events. In contrast to View.@double-click, an immediate-double-click cannot be prevented by use of stopPropagation on the View.@immediate-click event and can therefore be used to react to double-clicking independently of usage of the View.@immediate-click event.

key-down

inherited Event

key-down: CustomEvent<KeyDownEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires after a keyboard key is pressed.

Example

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

 if (event.key === "a"){
   let zm = view.zoom + 1;

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

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

key-up

inherited Event

key-up: CustomEvent<KeyUpEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires after a keyboard key is released.

layerview-create

inherited Event

layerview-create: CustomEvent<LayerViewCreateEvent>

Inherited from: ViewBaseEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

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

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-create-error

inherited Event

layerview-create-error: CustomEvent<LayerViewCreateErrorEvent>

Inherited from: ViewBaseEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires when an error occurs during the creation of a LayerView after a layer has been added to the map.

See also

View.whenLayerView()

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

inherited Event

layerview-destroy: CustomEvent<LayerViewDestroyEvent>

Inherited from: ViewBaseEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

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

mouse-wheel

inherited Event

mouse-wheel: CustomEvent<ViewMouseWheelEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

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

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

inherited Event

pointer-down: CustomEvent<PointerDownEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

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

pointer-enter

inherited Event

pointer-enter: CustomEvent<PointerEnterEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

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

pointer-leave

inherited Event

pointer-leave: CustomEvent<PointerLeaveEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

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

pointer-move

inherited Event

pointer-move: CustomEvent<PointerMoveEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

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

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

inherited Event

pointer-up: CustomEvent<PointerUpEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

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

resize

inherited Event

resize: CustomEvent<ViewResizeEvent>

Inherited from: ViewBaseEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires when the view's size changes.

See also

vertical-two-finger-drag

inherited Event

vertical-two-finger-drag: CustomEvent<VerticalTwoFingerDragEvent>

Inherited from: ViewEventTypes

Since: ArcGIS Maps SDK for JavaScript 5.0

Fires while the two pointers are dragged on the view.

Example

view.on("vertical-two-finger-drag", (event) => {
  // Display the distance moved vertically from the drag origin.
  console.log("y distance:", event.y);
});