View

AMD: require(["esri/views/View"], (View) => { /* code goes here */ });
ESM: import View from "@arcgis/core/views/View.js";
Class: esri/views/View
Inheritance: View Accessor
Subclasses: MapView , SceneView
Since: ArcGIS Maps SDK for JavaScript 4.0

A view provides the means of viewing and interacting with the components of a Map. The Map is merely a container, storing the geographic information contained in base layers and operational layers. The View renders the Map and its various layers, making them visible to the user.

There are two types of views: MapView and SceneView. The MapView renders a Map and its layers in 2D. The SceneView renders these elements in 3D. View is the base class of MapView and SceneView and has no constructor. To create a view, you must do so by directly creating an instance of either MapView or SceneView.

MapView (2D) SceneView (3D)
mapview sceneview

To associate a view with a map, you must set the map property to an instance of Map.

// Load the Map and MapView modules
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
  // Create a Map instance
  let map = new Map({
    basemap: "topo-vector"
  });

  // Create a MapView instance (for 2D viewing) and set its map property to
  // the map instance we just created
  let view = new MapView({
    map: map,
    container: "viewDiv"
  });
});

In the snippet above, you'll notice a container property set on the view. The container property is the reference to the DOM node that contains the view. This is commonly a <div> element. The container referenced in the example above might look something like:

<body>
 <div id="viewDiv"></div>
</body>

You can observe the view's relationship to the HTML container in the Create a 2D map tutorial and any of the available samples.

Other properties may be set on the view, such as the rotation, scale, popup, and padding. See MapView and SceneView for additional properties specific to creating views in 2D and 3D.

A Map may have multiple views associated with it, including a combination of MapViews and SceneViews. See the Geodesic buffers and 2D overview map in SceneView samples to learn how a MapView and a SceneView can display the same map in a single application. While multiple views can reference the same map, a view may not associate itself with more than one Map instance.

The View also allows users to interact with components of the map. For example, when a user clicks or touches the location of a feature in a map, they are not touching the feature nor the map; the event is actually handled with the View that references the map and the LayerView that references the layer. Therefore, events such as click are not handled on the Map or the Layer, but rather on the View. See MapView and SceneView for additional details.

See also

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
Show inherited properties Hide inherited properties
Name Type Summary Class

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

View

Represents an ongoing view animation initialized by goTo().

View

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

View

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

View

The name of the class.

Accessor

A fatal error returned when the view loses its WebGL context.

View

Indicates if the browser focus is on the view.

View

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

View

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

View

Options to configure input handling of the View.

View

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

View

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

View

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

View

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

View

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

View

Options to configure the navigation behavior of the View.

View

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

View

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

View

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

View

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

View

Indicates if the view is being resized.

View

Represents the current value of one pixel in the unit of the view's spatialReference.

View

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

View

The spatial reference of the view.

View

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

View

Indicates if the view is visible on the page.

View

This property specifies the base colors used by some widgets and components to render graphics and labels.

View

The view's time extent.

View

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

View

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

View

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

View

Contains the collection of active views on the page.

View

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

View

Property Details

allLayerViews

Property
allLayerViews Collection<LayerView>

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

See also

animation

Property
animation ViewAnimation

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

See also

basemapView

Property
basemapView BasemapView

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

container

Property
container HTMLDivElementautocast
Autocasts from String

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

Examples
// Sets container to the DOM id
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

Inherited
Property
declaredClass Stringreadonly
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.7 Accessor since 4.0, declaredClass added at 4.7.

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

fatalError

Property
fatalError Error
Since: ArcGIS Maps SDK for JavaScript 4.12 View since 4.0, fatalError added at 4.12.

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

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

focused

Property
focused Booleanreadonly
Since: ArcGIS Maps SDK for JavaScript 4.7 View since 4.0, focused added at 4.7.

Indicates if the browser focus is on the view.

graphics

Property
graphics Collection<Graphic>

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

Examples
// Adds a graphic to the View
view.graphics.add(pointGraphic);
// Removes a graphic from the View
view.graphics.remove(pointGraphic);

height

Property
height Numberreadonly

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

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

Default Value:0

input

Property
input Inputreadonly
Since: ArcGIS Maps SDK for JavaScript 4.9 View since 4.0, input added at 4.9.

Options to configure input handling of the View.

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

interacting

Property
interacting Booleanreadonly

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

Default Value:false

layerViews

Property
layerViews Collection<LayerView>

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

See also

magnifier

Property
magnifier Magnifierreadonly
Since: ArcGIS Maps SDK for JavaScript 4.19 View since 4.0, magnifier added at 4.19.

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

map

Property
map Mapautocast

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.

Property
navigating Booleanreadonly

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

Default Value:false
Property
navigation Navigation
Since: ArcGIS Maps SDK for JavaScript 4.9 View since 4.0, navigation added at 4.9.

Options to configure the navigation behavior of the View.

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

padding

Property
padding Object

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

Properties
left Number
optional

The left padding (in pixels).

top Number
optional

The top padding (in pixels).

right Number
optional

The right padding (in pixels).

bottom Number
optional

The bottom padding (in pixels).

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

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

By default, the popup property is an empty object that allows you to set the popup options. A Popup instance is automatically created and assigned to the view's popup when the user clicks on the view and popupEnabled is true, when the view.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.

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

Property
popupEnabled Boolean
Since: ArcGIS Maps SDK for JavaScript 4.27 View since 4.0, popupEnabled added at 4.27.

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

When true, a Popup instance is created and assigned to view.popup the first time the user clicks on the view, unless popup 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.

Default Value:true
See also
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

Property
ready Booleanreadonly

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

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

Default Value:false
See also

resizing

Property
resizing Booleanreadonly

Indicates if the view is being resized.

Default Value:false

resolution

Property
resolution Numberreadonly
Since: ArcGIS Maps SDK for JavaScript 4.9 View since 4.0, resolution added at 4.9.

Represents the current value of one pixel in the unit of the view's spatialReference. The value of resolution is calculated by dividing the view's extent width by its width.

size

Property
size Number[]readonly

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

spatialReference

Property
spatialReference SpatialReferenceautocast

The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map.

Default Value:null

stationary

Property
stationary Booleanreadonly

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

suspended

Property
suspended Booleanreadonly

Indicates if the view is visible on the page. When true, the view is not visible and it stops rendering and updating data. Set 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

Property
theme Theme
Since: ArcGIS Maps SDK for JavaScript 4.28 View since 4.0, theme added at 4.28.

This property specifies the base colors used by some widgets and components to render graphics and labels. This only affects those components that would otherwise use the default orange pattern.

Example
// Update the theme to use purple graphics
// and slightly transparent green text
view.theme = new Theme({
  accentColor: "purple",
  textColor: [125, 255, 13, 0.9]
});

timeExtent

Property
timeExtent TimeExtentautocast
Since: ArcGIS Maps SDK for JavaScript 4.12 View since 4.0, timeExtent added at 4.12.

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

Default Value:null
Example
// Create a csv layer from an online spreadsheet.
let csvLayer = new CSVLayer({
  url: "http://test.com/daily-magazines-sold-in-new-york.csv",
  timeInfo: {
    startField: "SaleDate" // The csv field contains date information.
  }
});

// Create a mapview showing sales for the last week of March 2019 only.
const view = new MapView({
  map: map,
  container: "viewDiv",
  timeExtent: {
    start: new Date("2019, 2, 24"),
    end:   new Date("2019, 2, 31")
  }
});

type

Property
type Stringreadonly

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

ui

Property
ui DefaultUIautocast

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

Property
updating Booleanreadonly

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

Default Value:false

views

Property
views Collection<View>static,readonly
Since: ArcGIS Maps SDK for JavaScript 4.11 View since 4.0, views added at 4.11.

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

width

Property
width Numberreadonly

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

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

Default Value:0

Method Overview

Show inherited methods Hide inherited methods
Name Return Type Summary Class

Adds one or more handles which are to be tied to the lifecycle of the object.

Accessor

Closes the popup.

View

Destroys the view, and any associated resources, including its map, popup, and UI elements.

View

Emits an event on the instance.

View

Sets the focus on the view.

View

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

View

Returns true if a named group of handles exist.

Accessor

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

View

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

View

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

View

Registers an event handler on the instance.

View

Opens the popup at the given location with content defined either explicitly with content or driven from the PopupTemplate of input features.

View

Removes a group of handles owned by the object.

Accessor

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

View

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

View

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

View

Method Details

addHandles

Inherited
Method
addHandles(handleOrHandles, groupKey)
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, addHandles added at 4.25.

Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();
Parameters
handleOrHandles WatchHandle|WatchHandle[]

Handles marked for removal once the object is destroyed.

groupKey *
optional

Key identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.

closePopup

Method
closePopup()
Since: ArcGIS Maps SDK for JavaScript 4.27 View since 4.0, closePopup added at 4.27.

Closes the popup.

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

destroy

Method
destroy()
Since: ArcGIS Maps SDK for JavaScript 4.17 View since 4.0, destroy added at 4.17.

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

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

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

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

emit

Method
emit(type, event){Boolean}
Since: ArcGIS Maps SDK for JavaScript 4.5 View since 4.0, emit added at 4.5.

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

Parameters
type String

The name of the event.

event Object
optional

The event payload.

Returns
Type Description
Boolean true if a listener was notified

focus

Method
focus()
Since: ArcGIS Maps SDK for JavaScript 4.5 View since 4.0, focus added at 4.5.

Sets the focus on the view.

hasEventListener

Method
hasEventListener(type){Boolean}

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

Parameter
type String

The name of the event.

Returns
Type Description
Boolean Returns true if the class supports the input event.

hasHandles

Inherited
Method
hasHandles(groupKey){Boolean}
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, hasHandles added at 4.25.

Returns true if a named group of handles exist.

Parameter
groupKey *
optional

A group key.

Returns
Type Description
Boolean Returns true if a named group of handles exist.
Example
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

isFulfilled

Method
isFulfilled(){Boolean}

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

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

isRejected

Method
isRejected(){Boolean}

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

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

isResolved

Method
isResolved(){Boolean}

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

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

on

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

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

Parameters

The name of the event or events to listen for.

modifiersOrHandler String[]|Function

Additional modifier keys to filter events. Please see Key Values for possible values. All the standard key values are supported. Alternatively, if no modifiers are required, the function will call when the event fires.

The following events don't support modifier keys: blur, focus, layerview-create, layerview-destroy, resize.

handler Function
optional

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

Returns
Type Description
Object Returns an event handler with a remove() method that can be called to stop listening for the event.
Property Type Description
remove Function When called, removes the listener from the event.
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);
});

openPopup

Method
openPopup(options){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.27 View since 4.0, openPopup added at 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.

Parameters
Specification
options Object
optional

Defines the location and content of the popup when opened.

Specification
title String
optional

Sets the title of the popup.

optional

Sets the content of the popup.

location Point
optional

Sets the popup's location, which is the geometry used to position the popup.

fetchFeatures Boolean
optional
Default Value: false

When true, indicates the popup should fetch the content of this feature and display it. If no PopupTemplate exists, a default template is created for the layer if defaultPopupTemplateEnabled = true. In order for this option to work, there must be a valid view and location set.

features Graphic[]
optional

Sets the popup's features, which populate the title and content of the popup based on each graphic's PopupTemplate.

promises Promise[]
optional

Sets pending promises on the popup. The popup will display once the promises resolve. Each promise must resolve to an array of Graphics.

featureMenuOpen Boolean
optional
Default Value: false

This property enables multiple features in a popup to display in a list rather than displaying the first selected feature. Setting this to true allows the user to scroll through the list of features returned from the query and choose the selection they want to display within the popup.

updateLocationEnabled Boolean
optional
Default Value: false

When true, indicates the popup should update its location for each paginated feature based on the selectedFeature's geometry.

collapsed Boolean
optional
Default Value: false

When true, indicates that only the popup header will display.

shouldFocus Boolean
optional
Default Value: false

When true, indicates that the focus should be on the popup after it has been opened.

Returns
Type Description
Promise 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
});

removeHandles

Inherited
Method
removeHandles(groupKey)
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, removeHandles added at 4.25.

Removes a group of handles owned by the object.

Parameter
groupKey *
optional

A group key or an array or collection of group keys to remove.

Example
obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

tryFatalErrorRecovery

Method
tryFatalErrorRecovery()
Since: ArcGIS Maps SDK for JavaScript 4.12 View since 4.0, tryFatalErrorRecovery added at 4.12.

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

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

when

Method
when(callback, errback){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.6 View since 4.0, when added at 4.6.

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

Parameters
callback Function
optional

The function to call when the promise resolves.

errback Function
optional

The function to execute when the promise fails.

Returns
Type Description
Promise Returns a new promise for the result of callback that may be used to chain additional functions.
Example
// Although this example uses MapView, any class instance that is a promise may use when() in the same way
let view = new MapView();
view.when(function(){
  // This function will execute once the promise is resolved
}, function(error){
  // This function will execute if the promise is rejected due to an error
});

whenLayerView

Method
whenLayerView(layer){Promise<LayerView>}

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

Parameter
layer Layer

The layer for which to obtain its LayerView.

Returns
Type Description
Promise<LayerView> Resolves to an instance of LayerView for the specified layer.
Example
// Create a feature layer from a url pointing to a Feature Service
let layer = new FeatureLayer(url);

map.add(layer);

view.whenLayerView(layer)
    .then(function(layerView) {
      // The layerview for the layer
    })
    .catch(function(error) {
      // An error occurred during the layerview creation
    });

Type Definitions

HighlightOptions

Type Definition
HighlightOptions Objectautocast
Since: ArcGIS Maps SDK for JavaScript 4.26 View since 4.0, HighlightOptions added at 4.26.

Options for configuring the highlight on MapView, SceneView or on layer views. Use the highlight() method on the appropriate LayerView to highlight a feature. The layerView.highlightOptions will take precedence over view.highlightOptions if both properties are set.

Notes

With version 4.19, highlighting a feature in 3D SceneView influences the shadow of the feature as well. By default, the shadow of the highlighted feature is displayed in a darker shade.

Properties
color Color
optional
Default Value:#00ffff
Autocasts from Object|Number[]|String

The color of the highlight fill.

haloColor Color
optional
Default Value:null
Autocasts from Object|Number[]|String

The color of the halo surrounding the highlight. If no haloColor is provided, then the halo will be colored with the specified color.

haloOpacity Number
optional
Default Value:1

The opacity of the highlight halo. This will be multiplied with any opacity specified in color.

fillOpacity Number
optional
Default Value:0.25

The opacity of the fill (area within the halo). This will be multiplied with the opacity specified in color.

shadowColor Color
optional
Default Value:#000000

The color of the highlighted feature's shadow in 3D SceneView.

shadowOpacity Number
optional
Default Value:0.4

The opacity of the highlighted feature's shadow. This will be multiplied with the opacity specified in shadowColor 3D SceneView.

shadowDifference Number
optional
Default Value:0.375

Defines the intensity of the shadow area obtained by overlapping the shadow of the highlighted feature and the shadow of other objects in 3D SceneView. The value ranges from 0 to 1. A value of 0 highlights the overlapping shadow areas in the same way (no difference). Setting it to 1 highlights only the difference between the shadow areas, so the overlapping shadow areas aren't highlighted at all. Here is an example of what the shadow highlight looks like with different values:

shadow-highlight

See also
Examples
// MapView.highlightOptions will be used on any layerview that
// does not have highlightOptions set
const view = new MapView({
  map: map,
  highlightOptions: {
    color: [255, 255, 0, 1], // bright yellow
    haloOpacity: 0.9,
    fillOpacity: 0.2
  }
});
// SceneView highlightOptions
const view = new SceneView({
  map: map,
  highlightOptions: {
    color: [255, 255, 0, 1],
    haloColor: "white",
    haloOpacity: 0.9,
    fillOpacity: 0.2,
    shadowColor: "black",
    shadowOpacity: 0.5
  }
});
// highlight features with bright fuchsia color based on a query result
let highlight;
view.whenLayerView(treesLayer).then(function(layerView){
  layerView.highlightOptions = {
    color: "#FF00FF", // bright fuchsia
    haloOpacity: 0.8,
    fillOpacity: 0.3
  };
  let query = treesLayer.createQuery();
  query.where = "type = 'Quercus'";
  treesLayer.queryFeatures(query).then(function(result){
    highlight?.remove();
    highlight = layerView.highlight(result.features);
  });
});

Event Overview

Name Type Summary Class
{target: View,native: Object}

Fires when browser focus is moved away from the view.

View
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0|1|2,type: "click",stopPropagation: Function,timestamp: Number,native: Object}

Fires after a user clicks on the view.

View
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0|1|2,type: "double-click",stopPropagation: Function,timestamp: Number,native: Object}

Fires after double-clicking on the view.

View
{action: "start"|"added"|"update"|"removed"|"end",x: Number,y: Number,origin: Object,origin.x: Number,origin.y: Number,button: 0|1|2,buttons: Number,type: "drag",radius: Number,angle: Number,stopPropagation: Function,timestamp: Number,native: Object}

Fires during a pointer drag on the view.

View
{target: View,native: Object}

Fires when browser focus is on the view.

View
{mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "hold",stopPropagation: Function,timestamp: Number,native: Object}

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

View
{mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "immediate-click",stopPropagation: Function,timestamp: Number,native: Object}

Fires right after a user clicks on the view.

View
{mapPoint: Point,x: Number,y: Number,button: 0|1|2,buttons: Number,type: "immediate-double-click",stopPropagation: Function,timestamp: Number,native: Object}

Is emitted after two consecutive immediate-click events.

View
{repeat: Boolean,key: String,type: "key-down",stopPropagation: Function,timestamp: Number,native: Object}

Fires after a keyboard key is pressed.

View
{type: "key-up",key: String,stopPropagation: Function,timestamp: Number,native: Object}

Fires after a keyboard key is released.

View
{layer: Layer,layerView: LayerView}

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

View
{layer: Layer,error: Error}

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

View
{layer: Layer,layerView: LayerView}

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

View
{x: Number,y: Number,deltaY: Number,type: "mouse-wheel",stopPropagation: Function,timestamp: Number,native: Object}

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

View
{pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-down",stopPropagation: Function,timestamp: Number,native: Object}

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

View
{pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-enter",stopPropagation: Function,timestamp: Number,native: Object}

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

View
{pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-leave",stopPropagation: Function,timestamp: Number,native: Object}

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

View
{pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-move",stopPropagation: Function,timestamp: Number,native: Object}

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

View
{pointerId: Number,pointerType: "mouse"|"touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-up",stopPropagation: Function,timestamp: Number,native: Object}

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

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

Fires when the view's size changes.

View

Event Details

blur

Event
blur
Since: ArcGIS Maps SDK for JavaScript 4.7 View since 4.0, blur added at 4.7.

Fires when browser focus is moved away from the view.

Properties
target View

The view that the browser focus is moved away from.

native Object

A standard DOM KeyboardEvent.

click

Event
click

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

Properties
mapPoint Point

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

x Number

The horizontal screen coordinate of the click on the view.

y Number

The vertical screen coordinate of the click on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates the current mouse button state.

Value Description
0 left click (or touch)
1 middle click
2 right click

Possible Values:0|1|2

type String

The event type.

The value is always "click".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

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

Event
double-click

Fires after double-clicking on the view.

Properties
mapPoint Point

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

x Number

The horizontal screen coordinate of the click on the view.

y Number

The vertical screen coordinate of the click on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

Indicates the current mouse button state.

Value Description
0 left click (or touch)
1 middle click
2 right click

Possible Values:0|1|2

type String

The event type.

The value is always "double-click".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

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

drag

Event
drag

Fires during a pointer drag on the view.

Properties
action String

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

Possible Values:"start"|"added"|"update"|"removed"|"end"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

origin Object

Screen coordinates of the start of the drag.

Specification
x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

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

Value Description
0 left mouse button (or touch)
1 middle mouse button
2 right mouse button

Possible Values:0|1|2

buttons Number

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

type String

The event type.

The value is always "drag".

radius Number

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

angle Number

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

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM MouseEvent.

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

focus

Event
focus
Since: ArcGIS Maps SDK for JavaScript 4.7 View since 4.0, focus added at 4.7.

Fires when browser focus is on the view.

Properties
target View

The view that the browser focus is currently on.

native Object

A standard DOM KeyboardEvent.

hold

Event
hold

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

Properties
mapPoint Point

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

x Number

The horizontal screen coordinate of the hold on the view.

y Number

The vertical screen coordinate of the hold on the view.

button Number

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

Value Description
0 left mouse button (or touch)
1 middle mouse button
2 right mouse button

Possible Values:0|1|2

buttons Number

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

type String

The event type.

The value is always "hold".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

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

immediate-click

Event
immediate-click
Since: ArcGIS Maps SDK for JavaScript 4.7 View since 4.0, immediate-click added at 4.7.

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

Properties
mapPoint Point

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

x Number

The horizontal screen coordinate of the click on the view.

y Number

The vertical screen coordinate of the click on the view.

button Number

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

Value Description
0 left click (or touch)
1 middle click
2 right click

Possible Values:0|1|2

buttons Number

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

type String

The event type.

The value is always "immediate-click".

stopPropagation Function

Prevents the event bubbling up the event chain. Inhibits the associated click and double-click events.

timestamp Number

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

native Object

A standard DOM PointerEvent.

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

immediate-double-click

Event
immediate-double-click
Since: ArcGIS Maps SDK for JavaScript 4.15 View since 4.0, immediate-double-click added at 4.15.

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

Properties
mapPoint Point

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

x Number

The horizontal screen coordinate of the click on the view.

y Number

The vertical screen coordinate of the click on the view.

button Number

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

Value Description
0 left click (or touch)
1 middle click
2 right click

Possible Values:0|1|2

buttons Number

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

type String

The event type.

The value is always "immediate-double-click".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

key-down

Event
key-down

Fires after a keyboard key is pressed.

Properties
repeat Boolean

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

key String

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

type String

The event type.

The value is always "key-down".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM KeyboardEvent.

Example
// Zoom in when user clicks on "a" button
// Zoom out when user clicks on "s" button
view.on("key-down", function(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

Event
key-up

Fires after a keyboard key is released.

Properties
type String

The event type.

The value is always "key-up".

key String

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

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM KeyboardEvent.

layerview-create

Event
layerview-create

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

Properties
layer Layer

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

layerView LayerView

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

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

layerview-create-error

Event
layerview-create-error

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

Properties
layer Layer

The layer in the map for which the view emitting this event failed to create a layer view.

error Error

An error object describing why the layer view failed to create.

See also
Example
// This function fires each time an error occurs during the creation of a layerview
view.on("layerview-create-error", function(event) {
  console.error("LayerView failed to create for layer with the id: ", event.layer.id);
});

layerview-destroy

Event
layerview-destroy

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

Properties
layer Layer

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

layerView LayerView

The LayerView that was destroyed in the view.

mouse-wheel

Event
mouse-wheel

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

Properties
x Number

The horizontal screen coordinate of the click on the view.

y Number

The vertical screen coordinate of the click on the view.

deltaY Number

Number representing the vertical scroll amount.

type String

The event type.

The value is always "mouse-wheel".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM WheelEvent.

Example
view.on("mouse-wheel", function(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

Event
pointer-down

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

Properties
pointerId Number

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

pointerType String

Indicates the pointer type.

Possible Values:"mouse"|"touch"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

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

type String

The event type.

The value is always "pointer-down".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

pointer-enter

Event
pointer-enter

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

Properties
pointerId Number

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

pointerType String

Indicates the pointer type.

Possible Values:"mouse"|"touch"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

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

type String

The event type.

The value is always "pointer-enter".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

pointer-leave

Event
pointer-leave

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

Properties
pointerId Number

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

pointerType String

Indicates the pointer type.

Possible Values:"mouse"|"touch"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

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

type String

The event type.

The value is always "pointer-leave".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

pointer-move

Event
pointer-move

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

Properties
pointerId Number

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

pointerType String

Indicates the pointer type.

Possible Values:"mouse"|"touch"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

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

type String

The event type.

The value is always "pointer-move".

stopPropagation Function

Prevents the event bubbling up the event chain.

timestamp Number

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

native Object

A standard DOM PointerEvent.

Example
// Fires `pointer-move` event when user clicks on "Shift"
// key and moves the pointer on the view.
view.on('pointer-move', ["Shift"], function(event){
  let point = view.toMap({x: event.x, y: event.y});
  bufferPoint(point);
});

pointer-up

Event
pointer-up

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

Properties
pointerId Number

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

pointerType String

Indicates the pointer type.

Possible Values:"mouse"|"touch"

x Number

The horizontal screen coordinate of the pointer on the view.

y Number

The vertical screen coordinate of the pointer on the view.

button Number

Indicates which mouse button was clicked.

buttons Number

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

type String

The event type.

The value is always "pointer-up".

stopPropagation Function

Prevents the event bubbling up the event chain. Inhibits the associated immediate-click, click and double-click events.

timestamp Number

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

native Object

A standard DOM PointerEvent.

resize

Event
resize

Fires when the view's size changes.

Properties
oldWidth Number

The previous view width in pixels

oldHeight Number

The previous view height in pixels

width Number

The new measured view width in pixels

height Number

The new measured view height in pixels

See also

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.