Map

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

A collection of analyses associated with the view.

Read more...

Indicates whether animations are disabled 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, goTo()). Setting this property to true disables all animations in the view.

Attribute

animations-disabled

Default value

false

The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: label, description, describedByElements, and labelledByElements.

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 Map component.

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

Indicates whether a layer's displayFilter is 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 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

Use the highlights property instead.

Options for configuring the highlight.

The highlights property is a collection of HighlightOptions objects that allow you to visually emphasize specific features on the map. See MapView.highlights for more information.

Indicates whether the view is being interacted with (for example, when panning or via 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 LayerViews of the operational layers in the map.

An array of objects that encountered an error while loading the component or any of its dependencies (e.g., basemap, ground, layers, tables). You may inspect the errors by accessing each object's loadError property.

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

An instance of a 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.

Padding to make the map's center and extent work off a subsection of the full map. This is particularly useful when layering UI elements or semi-transparent content on top of portions of the map.

See also

• Sample: Map padding

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 automatically when users click on the view.

Attribute

popup-disabled

Default value

false

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

• The view has a map. If map is a WebMap, then the map must be loaded.
• 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 viewOnReady() where code can execute on a working view.

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

Indicates if the map's spatialReference can be changed after it is ready. The default is false, indicating the map's spatialReference can be changed at runtime. When true, basemaps with spatial references that do not match the map's spatial reference will be disabled in arcgis-basemap-gallery and arcgis-basemap-toggle components and the map's spatialReference cannot be changed at runtime.

Attribute

spatial-reference-locked

Default value

false

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 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 managed 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 map. A zoom level (or scale) is a number that defines how large or small the contents of a map appear in a Map component. 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 map has no LODs. When setting the zoom value, the component converts it to the corresponding scale, or interpolates it if the zoom is a fractional number.

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

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 analysis view created for the given analysis object.

Read more

Parameters

Returns

Promise<ElevationProfileAnalysisView2D>

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

Read more

Parameters

Returns

Promise<LayerView>

Fires when a ArcgisMap fails to load or if one of its dependencies fails to load (e.g., basemap, ground, layers).

See also

• loadErrorSources

Example

1
2
3
viewElement.addEventListener("arcgisLoadError", () => {
  console.log(viewElement.loadErrorSources);
});

Fires when the view for an analysis is created.

Read more

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

Read more

Fires after an analysis view is destroyed.

Read more

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.

Fires if the view encounters a content or rendering error.

Example

1
2
3
viewElement.addEventListener("arcgisViewReadyError", () => {
  // handle error
});

Default slot for adding components to the map. User is responsible for positioning the content via CSS.

Slot for components positioned in the top-left corner.

Slot for components positioned in the top-right corner.

Slot for components positioned in the bottom-left corner.

Slot for components positioned in the bottom-right corner.

Slot for components positioned at the top-start (top-left in LTR, top-right in RTL).

Slot for components positioned at the top-end (top-right in LTR, top-left in RTL).

Slot for components positioned at the bottom-start (bottom-left in LTR, bottom-right in RTL).

Slot for components positioned at the bottom-end (bottom-right in LTR, bottom-left in RTL).

Slot for the Popup component to open automatically on click. When using this slot, the popup-disabled attribute must be set to true. Only the Popup component can be placed in this slot.