Map

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

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy method when you are done to prevent memory leaks.

Attribute

auto-destroy-disabled

Default value

false

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

Default value

null

Specifies a basemap for the map. The basemap is a set of layers that give geographic context to the view and the other operational layers in the map. It can either be set using a basemap ID string (see values), Basemap or BasemapStyle.

Read more

Attribute

basemap

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

Represents the view's center point; when setting the center, you may pass a esri/geometry/Point instance or a string representing a longitude/latitude pair ("-100.4593, 36.9014"). Setting the center immediately changes the current view. For animating the view, see this component's goTo() method.

Attribute

center

Specifies constraints to scale, zoom, and rotation that may be applied to the MapView.

Indicates whether layer's displayFilter are honored when rendering layers in the view. If false, display filters are ignored and all features are rendered.

Attribute

display-filter-disabled

Default value

false

The extent represents the visible portion of a map within the view as an instance of esri/geometry/Extent. Setting the extent immediately changes the view without animation. To animate the view, see this component's goTo() method. When the view is rotated, the extent does not update to include the newly visible portions of the map.

A rejected view indicates a fatal error making it unable to display.

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.

Gamepad input specific configuration settings.

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

Examples

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

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

Specifies the surface properties for the map.

Attribute

ground

Options for configuring the highlight. Use the highlight method on the appropriate esri/views/layers/LayerView to highlight a feature. The layerView's highlightOptions will take precedence over the MapView's highlightOptions if both properties are set.

Options for configuring the highlight.

The highlights property is a collection of HighlightGroup objects that allow you to visually emphasize specific features on the map.

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

Default value

false

Contains indoor positioning system information for the map.

The ID of a WebMap from ArcGIS Online or ArcGIS Enterprise portal.

To configure the portal url you must set the portalUrl property on config before the Map component loads.

Attribute

item-id

A collection containing a hierarchical list of all the created esri/views/layers/LayerView LayerViews of the esri/Map#layers operational layers in the map.

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

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

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

Default value

false

Options to configure the navigation behavior of the View.

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

Default value

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

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

Read more...

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

Attribute

popup-disabled

Default value

false

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

Default value

false

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.

Attribute

resize-align

Default value

"center"

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

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

Attribute

rotation

Default value

0

Represents the map scale at the center of the view. Setting the scale immediately changes the view. For animating the view, see this component's goTo() method.

Attribute

scale

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

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

Default value

false

Indicates if the view is visible on the page.

Attribute

suspended

Default value

true

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

Default value

null

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

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.

Attribute

time-zone

Default value

"system"

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

Default value

false

The MapView instance created and manged by the component. Accessible once the component is fully loaded.

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 this component's goTo() method.

The visibleArea represents the visible portion of a map within the view as an instance of a Polygon.

Read more...

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, the MapView converts it to the corresponding scale, or interpolates it if the zoom is a fractional number. MapView can display maps with different projections at a full range of scales, and so use the scale property on this component rather than zoom level.

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

Attribute

zoom

This event is for view related property changes: zoom, scale, center, rotation, extent, camera, viewpoint. This event will also emit if stationary toggles from true to false.

Fires after a user clicks on the view.

Fires after double-clicking on the view.

Fires during a pointer drag on the view.

Fires during a pointer drag on the view.

Fires right after a user clicks on the view.

Is emitted after two consecutive immediate-click events.

Fires after a keyboard key is pressed.

Fires after a keyboard key is pressed.

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

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

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

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

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

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

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

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

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

This event is for the ready property and will be emitted when the view is ready. This event will also emit if the map property is changed.

Adds a layer to the map layers collection.

Parameters

Returns

Promise<void>

Adds a layer or array of layers to the map layers collection.

Parameters

Returns

Promise<void>

Adds a table to the map tables collection.

Parameters

Returns

Promise<void>

Adds a table or array of tables to the map tables collection.

Parameters

Returns

Promise<void>

Closes the popup.

Returns

Promise<void>

Create a promise that resolves once component is fully loaded.

Example

1
2
3
4
const arcgisMap = document.querySelector("arcgis-map");
document.body.append(arcgisMap);
await arcgisMap.componentOnReady();
console.log("arcgis-map is ready to go!");

Returns

Promise<void>

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

Returns

Promise<void>

Sets the view to a given target.

Parameters

Returns

Promise<unknown>

Returns hit test results from each layer that intersects the specified screen coordinates.

Parameters

Returns

Promise<HitTestResult>

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

Parameters

Returns

Promise<void>

Create a screenshot of the current view.

Parameters

Returns

Promise<Screenshot>

Parameters

Returns

Point

Parameters

Returns

MapViewScreenPoint | null | undefined

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

Returns

Promise<void>

viewOnReady() may be leveraged once an instance of the component and its underlying view is created and ready. This method takes two input parameters, a callback function and an errback function, and returns a promise. The callback executes when the promise resolves, and the errback executes if the promise is rejected.

See also

• Watch for changes - waiting for components or views to be ready

Example

1
2
3
4
const viewElement = document.querySelector("arcgis-map");
await viewElement.viewOnReady();
// The view is now ready to be used.
viewElement.map.add(new FeatureLayer({...}));

Parameters

Returns

Promise<void>

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

Parameters

Returns

Promise<LayerView>