@arcgis/map-components
Version:
ArcGIS Map Components
888 lines (887 loc) • 81.6 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type MapView from "@arcgis/core/views/MapView.js";
import type Collection from "@arcgis/core/core/Collection.js";
import type Layer from "@arcgis/core/layers/Layer.js";
import type Analysis from "@arcgis/core/analysis/Analysis.js";
import type Point from "@arcgis/core/geometry/Point.js";
import type Viewpoint from "@arcgis/core/Viewpoint.js";
import type Ground from "@arcgis/core/Ground.js";
import type GamepadSettings from "@arcgis/core/views/input/gamepad/GamepadSettings.js";
import type Basemap from "@arcgis/core/Basemap.js";
import type Map from "@arcgis/core/Map.js";
import type Graphic from "@arcgis/core/Graphic.js";
import type LayerView from "@arcgis/core/views/layers/LayerView.js";
import type ColorBackground from "@arcgis/core/webmap/background/ColorBackground.js";
import type BasemapView from "@arcgis/core/views/BasemapView.js";
import type MapViewConstraints from "@arcgis/core/views/2d/MapViewConstraints.js";
import type Error from "@arcgis/core/core/Error.js";
import type HighlightOptions from "@arcgis/core/views/support/HighlightOptions.js";
import type IPSInfo from "@arcgis/core/webdoc/IPSInfo.js";
import type Magnifier from "@arcgis/core/views/Magnifier.js";
import type Navigation from "@arcgis/core/views/navigation/Navigation.js";
import type Popup from "@arcgis/core/widgets/Popup.js";
import type SelectionManager from "@arcgis/core/views/SelectionManager.js";
import type SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
import type Theme from "@arcgis/core/views/Theme.js";
import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
import type Polygon from "@arcgis/core/geometry/Polygon.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { LoadErrorSource } from "../types.js";
import type { ArcgisPopup } from "../arcgis-popup/customElement.js";
import type { LayerView2DFor, ResizeAlign } from "@arcgis/core/views/2d/types.js";
import type { DoubleClickEvent, DoubleTapDragEvent, VerticalTwoFingerDragEvent, PointerUpEvent, PointerMoveEvent, PointerLeaveEvent, PointerEnterEvent, PointerDownEvent, ViewMouseWheelEvent, LayerViewDestroyEvent, LayerViewCreateErrorEvent, LayerViewCreateEvent, KeyUpEvent, KeyDownEvent, ImmediateDoubleClickEvent, ImmediateClickEvent, HoldEvent, DragEvent, ClickEvent } from "@arcgis/core/views/input/types.js";
import type { AnalysisViewDestroyEvent, AnalysisViewCreateErrorEvent, AnalysisViewCreateEvent, ToScreenOptions2D, Screenshot, UserSettings, ViewHitTestResult, HitTestOptions, GoToOptions2D, GoToTarget2D } from "@arcgis/core/views/types.js";
import type { AnalysisView2DUnion } from "@arcgis/core/views/2d/analysis/types.js";
import type { ScreenPoint, ScreenRect } from "@arcgis/core/core/types.js";
import type { FetchPopupFeaturesOptions, ViewPopupOpenOptions } from "@arcgis/core/views/PopupView.js";
import type { ReadonlyCollection } from "@arcgis/core/core/Collection.js";
import type { ViewPadding } from "@arcgis/core/views/ui/types.js";
import type { SlotGroupRefs } from "../../support/slots.js";
/**
* The ArcGIS Map component is used to add 2D maps to web applications. For 3D maps, use the
* [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
*
* #### Initializing the Map component
* The Map component creates a [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/)
* and can be initialized in one of three ways:
*
* ##### 1. Using a WebMap
* Load a [WebMap](https://developers.arcgis.com/javascript/latest/references/core/WebMap/) from [ArcGIS Online](https://www.arcgis.com/home/index.html)
* or an [ArcGIS Enterprise portal](https://doc.esri.com/en/arcgis-enterprise/latest/plan/what-is-portal-for-arcgis-.html) by specifying the [itemId](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#itemId) attribute.
*
* ```html
* <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>
* ```
*
* ##### 2. Setting Map component attributes directly
* Define the Map component using attributes like [basemap](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#basemap), [center](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#center), and [zoom](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#zoom) directly.
*
* ```html
* <arcgis-map basemap="satellite" center="-154.88, 19.46" zoom="15"></arcgis-map>
* ```
*
* ##### 3. Providing a Map instance
* Alternatively, you can provide your own [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) instance to the component.
* This allows full control over map configuration, including [basemap](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#basemap), operational [layers](https://developers.arcgis.com/javascript/latest/references/core/Map/#layers)
* and [spatialReference](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#spatialReference). See the [Select features by rectangle sample](https://developers.arcgis.com/javascript/latest/sample-code/highlight-features-by-geometry/)
* for an example of this approach in action.
*
* ```html
* <arcgis-map></arcgis-map>
* <script type="module">
* const viewElement = document.querySelector("arcgis-map");
*
* // set the basemap of the map to states feature layer
* // add national parks feature layer and a polygon graphics layer
* viewElement.map = new Map({
* basemap: new Basemap({ baseLayers: [states] }),
* layers: [nationalParksLayer, polygonGraphicsLayer]
* });
*
* // set the spatial reference of the map to NAD 1983 Albers contiguous USA
* viewElement.spatialReference = { wkid: 102003 };
* </script>
* ```
* #### Adding components and customizing the Map
*
* Other components can be added and connected to the Map component.
*
* ```html
* <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca">
* <arcgis-zoom slot="top-left"></arcgis-zoom>
* <arcgis-legend slot="bottom-left"></arcgis-legend>
* </arcgis-map>
* ```
*
* The Map component can be customized further using any of the [core API functionalities](https://developers.arcgis.com/javascript/latest/references/core/) of the ArcGIS Maps SDK for JavaScript.
*
* ```js
* const viewElement = document.querySelector("arcgis-map");
* viewElement.addEventListener("arcgisViewReadyChange", () => {
* const layer = new GraphicsLayer({ title: "My Layer" });
* viewElement.map.add(layer);
* });
* ```
*
* See also:
* - [SDK sample apps using the Map component](https://developers.arcgis.com/javascript/latest/sample-code/?tagged=arcgis-map)
* - [Get started](https://developers.arcgis.com/javascript/latest/get-started/)
* - [Programming patterns](https://developers.arcgis.com/javascript/latest/programming-patterns/)
*
* @cssproperty [--arcgis-layout-overlay-space-top] - _Since 4.34_ Specifies the top padding for the layout.
* @cssproperty [--arcgis-layout-overlay-space-bottom] - _Since 4.34_ Specifies the bottom padding for the layout.
* @cssproperty [--arcgis-layout-overlay-space-left] - _Since 4.34_ Specifies the left padding for the layout.
* @cssproperty [--arcgis-layout-overlay-space-right] - _Since 4.34_ Specifies the right padding for the layout.
* @cssproperty [--arcgis-view-color-focus] - _Since 5.0_ Specifies the focus outline color for the view.
* @cssproperty [--arcgis-table-row-background-color] - _Since 5.1_ Specifies the background color for table rows.
* @cssproperty [--arcgis-table-row-alt-background-color] - _Since 5.1_ Specifies the background color for alternate table rows.
* @slot - Default slot for adding components to the map. User is responsible for positioning the content via CSS.
* @slot [top-left] - Slot for components positioned in the top-left corner.
* @slot [top-right] - Slot for components positioned in the top-right corner.
* @slot [bottom-left] - Slot for components positioned in the bottom-left corner.
* @slot [bottom-right] - Slot for components positioned in the bottom-right corner.
* @slot [top-start] - Slot for components positioned at the top-start (top-left in LTR, top-right in RTL).
* @slot [top-end] - Slot for components positioned at the top-end (top-right in LTR, top-left in RTL).
* @slot [bottom-start] - Slot for components positioned at the bottom-start (bottom-left in LTR, bottom-right in RTL).
* @slot [bottom-end] - Slot for components positioned at the bottom-end (bottom-right in LTR, bottom-left in RTL).
* @slot [popup] - Slot for the [arcgis-popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) component to open automatically on click. Only the Popup component can be placed in this slot.
* @since 4.28
*/
export abstract class ArcgisMap extends LitElement {
/**
* Collection containing a flat list of all the created LayerViews
* related to the basemap, operational layers, and group layers in this view.
*
* @see [LayerView](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/)
*/
get allLayerViews(): ReadonlyCollection<LayerView>;
/**
* A collection of analyses associated with the view.
*
* @since 4.34
* @example
* ```js
* // Adds an analysis to the View
* view.analyses.add(elevationProfileAnalysis);
* ```
* @example
* ```js
* // Removes an analysis from the View
* view.analyses.remove(elevationProfileAnalysis);
* ```
*/
accessor analyses: Collection<Analysis>;
/**
* Indicates whether animations are disabled in the view. This includes animated symbols (animated
* [CIMSymbol](https://developers.arcgis.com/javascript/latest/references/core/symbols/CIMSymbol/),
* [PictureMarkerSymbol](https://developers.arcgis.com/javascript/latest/references/core/symbols/PictureMarkerSymbol/)
* from a GIF/animated PNG), animated renderers
* ([FlowRenderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/FlowRenderer/)),
* animated layers ([MediaLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer/),
* [VideoLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VideoLayer/)), and
* animations triggered by view navigation (for example,
* [goTo()](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#goTo)).
* Setting this property to `true` disables all animations in the view.
*
* @default false
* @since 4.34
*/
accessor animationsDisabled: boolean;
/**
* The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaLabelledByElements).
*
* @since 4.34
*/
accessor aria: MapView["aria"];
/**
* The attribution items displayed in the view's attribution.
*
* @since 5.0
*/
get attributionItems(): MapView["attributionItems"];
/**
* The light or dark mode used to display the attribution.
* By default, the mode is inherited from the [Calcite's mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes).
* You can override the value to style the attribution alongside the map or scene content.
*
* @since 5.0
*/
accessor attributionMode: "dark" | "light" | null | undefined;
/**
* 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()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#destroy) method when you are done to
* prevent memory leaks.
*
* @default false
*/
accessor autoDestroyDisabled: boolean;
/**
* The background color of the Map component.
*
* @example
* ```js
* const viewElement = document.querySelector("arcgis-map");
* viewElement.background = new ColorBackground ({
* color: "magenta" // autocasts as new Color()
* });
* ```
*/
accessor background: ColorBackground | null | undefined;
/**
* 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.
*
* The basemap can be set from a basemap ID string from the [basemap styles service](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/), such as `arcgis/navigation`, or from the [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/) class.
*
* > [!NOTE]
* > Accessing the basemap styles service requires authentication, see [Authentication and access tokens](https://developers.arcgis.com/javascript/latest/authentication/access-tokens/) for more information.
*
* @example
* ```html
* <!-- Basemap set using a basemap ID string from the basemap styles service -->
* <arcgis-map basemap="arcgis/navigation" center="-98, 39" zoom="4"></arcgis-map>
* ```
* @example
* ```js
* // Basemap set using a Basemap instance
* const viewElement = document.querySelector("arcgis-map");
* viewElement.basemap = new Basemap({
* title: "Terrain",
* baseLayers: [
* new VectorTileLayer({
* url: "https://arcgis.com/sharing/rest/content/items/b5676525747f499687f12746441101ef/resources/styles/root.json",
* })
* ]
* });
* ```
* @see [Map.basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)
* @see [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/)
* @see [BasemapStyle](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/)
* @see [Authentication and access tokens](https://developers.arcgis.com/javascript/latest/authentication/access-tokens/)
*/
accessor basemap: Basemap | string | undefined;
/** Represents the view for a single basemap after it has been added to the map. */
accessor basemapView: BasemapView<LayerView>;
/**
* Indicates if the view component can zoom in.
*
* @default false
* @since 5.0
*/
get canZoomIn(): boolean;
/**
* Indicates if the view component can zoom out.
*
* @default false
* @since 5.0
*/
get canZoomOut(): boolean;
/**
* Represents the view's center point; when setting the center, you may pass a
* [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) instance, numbers representing
* a longitude/latitude pair (`[-100.4593, 36.9014]`), or a string attribute 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()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#goTo) method.
*
* The returned [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/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 [clone()](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/#clone) method.
*
* **Notes**
*
* * If the spatial reference of `center` set in the constructor does not match the [spatialReference](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#spatialReference) of the view, then the
* [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) will be loaded dynamically.
* * At runtime, the [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) must be
* [loaded](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) 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()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded)
* method. If it is not yet loaded, you can call [load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) method.
*
* @example
* ```html
* <arcgis-map zoom="4" center="-98, 39"></arcgis-map>
* ```
* @example
* ```js
* // Sets the initial center point of the map component to lon/lat coordinates
* // lon/lat will be projected to match the spatial reference of the view
* const viewElement = document.querySelector("arcgis-map");
* viewElement.center = [-98, 39]; // lon, lat
* ```
* @example
* ```js
* // Updates the view's center point to a pre-determined Point object
* let centerPoint = new Point({
* x: 12804.24,
* y: -1894032.09,
* spatialReference: {
* wkid: viewElement.spatialReference // wkid 2027
* }
* });
* const viewElement = document.querySelector("arcgis-map");
* viewElement.center = centerPoint;
* ```
* @example
* ```js
* // the point's spatialReference does not match the view's spatialReference
* // the projectOperator will be used to project the point to match
* // the view's spatialReference
* const centerPoint = new Point({
* x: -8746995,
* y: 4352308,
* spatialReference: {
* wkid: 8857
* }
* });
* if (!projectOperator.isLoaded()) {
* await projectOperator.load();
* }
* const viewElement = document.querySelector("arcgis-map");
* viewElement.center = centerPoint;
* ```
*/
get center(): MapView["center"];
set center(value: MapView["center"] | null | undefined | number[] | string);
/**
* Specifies constraints to scale, zoom, and rotation that may be applied to the Map.
*
* @see [MapViewConstraints](https://developers.arcgis.com/javascript/latest/references/core/views/2d/MapViewConstraints/)
* @see [TileInfo#create()](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/#create)
* @see [Zoom and LODs](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#mapview-lods)
* @example
* ```js
* const viewElement = document.querySelector("arcgis-map");
* viewElement.constraints = new MapViewConstraints({
* 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
* });
* ```
* @example
* ```js
* // This snippet shows how to set the Map scale 1:1 while generating additional LODs for the 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;
*
* const constraints = new MapViewConstraints({
* snapToZoom: false,
* lods
* });
*
* const viewElement = document.querySelector("arcgis-map");
* viewElement.spatialReference = spatialReference;
* viewElement.center = center;
* viewElement.scale = 1;
* viewElement.constraints = constraints;
* ```
*/
accessor constraints: MapViewConstraints;
/**
* Indicates whether a layer's `displayFilterInfo` is honored when rendering layers in the view.
* If `false`, display filters are ignored and all features are rendered.
*
* @default false
*/
accessor displayFilterDisabled: boolean;
/**
* The extent represents the visible portion of a map within the view as an instance of [Extent](https://developers.arcgis.com/javascript/latest/references/core/geometry/Extent/).
* Setting the extent immediately changes the view without animation. To animate
* the view, see this component's [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#goTo) method.
* When the view is rotated, the extent does not update to include the newly visible portions of the map.
*
* **Notes**
*
* * If the spatial reference of `extent` set does not match the [spatialReference](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#spatialReference) of the view, then the
* [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/) will be loaded dynamically.
* * At runtime, the [projectOperator](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/)
* must be [loaded](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) 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()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded)
* method. If it is not yet loaded, you can call the [load](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) method.
*/
accessor extent: MapView["extent"];
/**
* A rejected view indicates a fatal error making it unable to display.
*
* @since 4.12
* @see [tryFatalErrorRecovery()](https://developers.arcgis.com/javascript/latest/references/core/views/View/#tryFatalErrorRecovery)
* @example
* ```js
* reactiveUtils.when(
* () => viewElement.fatalError,
* () => {
* console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
* viewElement.tryFatalErrorRecovery();
* }
* );
* ```
*/
accessor fatalError: Error<any> | null | undefined;
/**
* 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.
*/
accessor floors: Collection<string>;
/** Gamepad input specific configuration settings. */
get gamepad(): GamepadSettings;
/**
* Allows for adding graphics directly to the default graphics in the map component.
*
* @example
* ```js
* // Adds a graphic to the map component.
* viewElement.graphics.add(pointGraphic);
* ```
* @example
* ```js
* // Removes a graphic from the map component.
* viewElement.graphics.remove(pointGraphic);
* ```
* @see [Graphic](https://developers.arcgis.com/javascript/latest/references/core/Graphic/)
* @see [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/)
* @see [Intro to graphics](https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/)
*/
accessor graphics: Collection<Graphic>;
/**
* Specifies the surface properties for the map.
*
* @see [ElevationLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ElevationLayer/)
* @see [Ground](https://developers.arcgis.com/javascript/latest/references/core/Ground/)
* @example
* ```js
* // Create a map with the world elevation layer overlaid by a custom elevation layer
* const worldElevation = new ElevationLayer({
* url: "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
* });
* const customElevation = new ElevationLayer({
* url: "https://my.server.com/arcgis/rest/service/MyElevationService/ImageServer"
* });
* const map = new Map({
* basemap: "topo-vector",
* ground: new Ground({
* layers: [ worldElevation, customElevation ]
* })
* });
*
* viewElement.map = map;
* ```
*/
get ground(): Ground;
set ground(value: Ground | string);
/**
* Indicates whether the attribution is hidden 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](https://developers.arcgis.com/terms/attribution/) documentation.
* For information on terms of use, see the [Terms of Use FAQ](https://developers.arcgis.com/terms/faq/).
*
* @default false
* @since 5.0
*/
accessor hideAttribution: boolean;
/**
* Represents a collection of [HighlightOptions](https://developers.arcgis.com/javascript/latest/references/core/views/support/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](https://developers.arcgis.com/javascript/latest/references/core/views/support/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](https://developers.arcgis.com/javascript/latest/references/core/views/support/HighlightOptions/)
* object must be part of this collection in order to be applied to features.
*
* To highlight a feature, use the [highlight()](https://developers.arcgis.com/javascript/latest/references/core/views/layers/FeatureLayerView/#highlight)
* method on the relevant [LayerView](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/) instance. To apply specific
* [HighlightOptions](https://developers.arcgis.com/javascript/latest/references/core/views/support/HighlightOptions/), include the
* [name](https://developers.arcgis.com/javascript/latest/references/core/views/support/HighlightOptions/#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 [Sample: Highlight features by geometry](https://developers.arcgis.com/javascript/latest/sample-code/highlight-features-by-geometry/)
* @see [Sample: Highlight point features](https://developers.arcgis.com/javascript/latest/sample-code/highlight-point-features/)
* @since 4.32
* @example
* ```js
* // 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;
*
* viewElement.addEventListener("arcgisViewPointerMove", async (event) => {
* try {
* await updateHoverHighlight(event);
* } catch (error) {
* if (error.name !== "AbortError") {
* console.error(error);
* }
* }
* });
*
* const updateHoverHighlight = promiseUtils.debounce(async (event) => {
* // Search for the first feature in the featureLayer at the hovered location
* const response = await viewElement.hitTest(event.detail, { include: featureLayer });
* const result = response.results[0];
*
* // Remove any previous highlight, if it exists
* hoverHighlight?.remove();
*
* if (result?.type === "graphic") {
* // Highlight the hit feature with the temporary highlight options
* hoverHighlight = layerView.highlight(result.graphic, { name: "temporary" });
* }
* });
* ```
* @example
* ```js
* // Override the default highlights collection
* const viewElement = document.querySelector("arcgis-map");
* viewElement.highlights = new Collection([
* { name: "default", color: "orange" },
* { name: "temporary", color: "magenta" },
* { name: "table", color: "cyan", fillOpacity: 0.5, haloOpacity: 0}
* ]);
* ```
* @example
* ```js
* // 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
* viewElement.highlights.add(selectionGroup, 0);
* ```
*/
accessor highlights: Collection<HighlightOptions>;
/**
* Indicates whether the view is being interacted with (for example, when panning or via an interactive tool).
*
* @default false
*/
get interacting(): boolean;
/**
* Contains indoor positioning system information for the map.
*
* @since 4.31
*/
accessor ipsInfo: IPSInfo | null | undefined;
/**
* 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`](https://developers.arcgis.com/javascript/latest/references/core/config/#portalUrl) before the Map component loads.
*/
accessor itemId: null | undefined | string;
/**
* A collection containing a hierarchical list of all the created
* [LayerView](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/)s of the
* [operational layers](https://developers.arcgis.com/javascript/latest/references/core/Map/#layers) in the map.
*
* @see [LayerView](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/)
*/
get layerViews(): Collection<LayerView>;
/**
* 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.
*
* @since 4.34
*/
accessor loadErrorSources: LoadErrorSource[] | undefined;
/**
* The magnifier allows for showing a portion of the view as a magnifier image on top of the view.
*
* @since 4.19
*/
get magnifier(): Magnifier;
/** An instance of a [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) object to display in the view. */
accessor map: Map | null | undefined;
/**
* Indication whether the view is being navigated (for example when panning).
*
* @default false
*/
get navigating(): boolean;
/**
* Options to configure the navigation behavior of the View.
*
* @since 4.9
* @example
* ```js
* // Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.
* const viewElement = document.querySelector("arcgis-map");
* viewElement.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,
* };
* ```
*/
accessor navigation: Navigation;
/**
* 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.
*
* @default {left: 0, top: 0, right: 0, bottom: 0}
* @see [Sample: Map padding](https://developers.arcgis.com/javascript/latest/sample-code/map-padding/)
*/
accessor padding: ViewPadding;
/**
* A [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) widget object that displays general content or attributes from [layers](https://developers.arcgis.com/javascript/latest/references/core/Map/#layers) in the [map](https://developers.arcgis.com/javascript/latest/references/core/views/View/#map). Consider using the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement) (beta), which represents the Popup component, instead.
*
* By default, the `popup` property is an empty object that allows you to set the popup options. A [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) instance is automatically created and assigned to the view's [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popup) when the user clicks on the view and [popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/views/PopupView/#popupEnabled) is `true`, when the [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#openPopup) method is called, or when some widgets need the popup, such as [Search](https://developers.arcgis.com/javascript/latest/references/core/widgets/Search/). If [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popup) is `null`, the popup instance will not be created.
*
* @see [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement)
* @see [popupDisabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupDisabled)
* @see [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#openPopup)
*/
accessor popup: Popup | null | undefined;
/**
* Indicates whether the [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement) (beta) is enabled as the default popup. When set to `true`, the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement) property (representing the component) will be used for popups instead of the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popup) property (representing the widget).
*
* **Note:** This is a beta feature and may change in future releases. At version 6.0, the Popup component will be used by default instead of the Popup widget and the `popup-component-enabled` attribute will no longer be necessary.
*
* @default false
* @beta
* @since 5.0
* @see [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement)
* @example
* ```html
* <arcgis-map item-id="WEBMAP-ID" popup-component-enabled></arcgis-map>
* ```
*/
accessor popupComponentEnabled: boolean;
/**
* Controls whether the default popup opens automatically when users click on the view. This controls both the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement) and [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popup) properties. When set to `true`, the popup will not open on click or when triggered programmatically.
*
* @default false
* @see [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#openPopup)
*/
accessor popupDisabled: boolean;
/**
* A reference to the current [arcgis-popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) (beta). The [popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupComponentEnabled) property must be set to `true` to use this property.
*
* **Note:** This is a beta feature and may change in future releases.
*
* @beta
* @since 5.0
* @see [popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupComponentEnabled)
* @example
* ```html
* <arcgis-map item-id="WEBMAP-ID" popup-component-enabled></arcgis-map>
* <script type="module">
* const viewElement = document.querySelector("arcgis-map");
* await viewElement.viewOnReady();
* viewElement.popupElement.dockEnabled = true;
* viewElement.popupElement.dockOptions = {
* buttonEnabled: false,
* breakpoint: false,
* position: "top-right",
* };
* </script>
* ```
*/
get popupElement(): ArcgisPopup | null;
/**
* When `true`, this property indicates whether the [view](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#view) has successfully satisfied all dependencies, signaling that the following conditions are met:
*
* * The view has a [map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#map). If [map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#map)
* is a [WebMap](https://developers.arcgis.com/javascript/latest/references/core/WebMap/), then the map
* must be [loaded](https://developers.arcgis.com/javascript/latest/references/core/WebMap/#loaded).
* * The view has a [spatialReference](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#spatialReference), a [center](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#center), and a [scale](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#scale).
* These also can be inferred by setting an [extent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#extent).
*
* When a view becomes ready it will resolve itself and invoke
* the callback defined in [viewOnReady()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#viewOnReady) where code can execute on a working view.
*
* @default false
* @see [when()](https://developers.arcgis.com/javascript/latest/references/core/views/View/#when)
*/
get ready(): boolean;
/**
* 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 "center"
*/
accessor resizeAlign: ResizeAlign;
/**
* 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.
*
* @since 4.9
*/
get resolution(): number;
/**
* 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](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#constraints) to `false`. See the code snippet below for
* an example of this.
*
* @default 0
* @example
* ```html
* <!-- Due north is rotated 90 degrees, pointing to the right side of the view -->
* <arcgis-map basemap="satellite" rotation="90"></arcgis-map>
* ```
* @example
* ```js
* // Due north is rotated 180 degrees, pointing to the bottom of the view
* viewElement.rotation = 180;
* ```
* @example
* ```js
* // Due north is rotated 270 degrees, pointing to the left side of the view
* viewElement.rotation = 270;
* ```
* @example
* ```js
* // Due north is rotated 0 degrees, pointing to the top of the view (the default)
* viewElement.rotation = 0; // 360 or multiple of 360 (e.g. 720) works here as well.
* ```
* @example
* ```js
* // Disables map rotation
* viewElement.constraints = {
* rotationEnabled: false
* };
* ```
*/
accessor rotation: number;
/**
* 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()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#goTo) method.
*/
accessor scale: number;
/**
* The default [SelectionManager](https://developers.arcgis.com/javascript/latest/references/core/views/SelectionManager/) for this view. Used to manage selections of features across layers.
*
* @since 5.0
* @beta
*/
get selectionManager(): SelectionManager;
/** @internal */
get slotGroupRefs(): SlotGroupRefs;
/**
* The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map.
* You can change the spatialReference of the view after it is initialized by either directly changing
* this property, or by changing the basemap from the [arcgis-basemap-gallery](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-gallery/)
* and [arcgis-basemap-toggle](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-toggle/) components.
* Set [spatialReferenceLocked](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#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](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/)
* is loaded by calling [projectOperator.isLoaded()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#isLoaded) method.
* If it is not yet loaded, call [projectOperator.load()](https://developers.arcgis.com/javascript/latest/references/core/geometry/operators/projectOperator/#load) method.
* If the `projectOperator` is not loaded, the view's [center](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#center) will default to `[0, 0]` in the new spatial reference of the view and a console error will be thrown.
*
* **Notes**
*
* * [LayerViews](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/) not compatible with the view's spatial reference
* are not displayed. In such case, the layer view's [suspended](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/#suspended)
* property is `true` and [spatialReferenceSupported](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/#spatialReferenceSupported)
* property is `false`.
* * When setting view's spatial reference, the [center](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#center), [extent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#extent) or [viewpoint](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#viewpoint) properties are projected to the new spatial
* reference. The [scale](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#scale) and [rotation](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#rotation) properties are adjusted to keep the content of the map at the same size and orientation on screen.
* * To ensure [TileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/TileLayer/) and
* [VectorTileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/)
* are displayed in a [basemap](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#basemap) correctly, the spatialReference of the view must be set match their
* [tileInfo's](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/) spatial reference.
* * Switching spatial reference with an [imageCoordinateSystem](https://developers.arcgis.com/javascript/latest/references/core/geometry/SpatialReference/#imageCoordinateSystem)
* is not supported.
*
* @see [spatialReferenceLocked](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#spatialReferenceLocked)
* @example
* ```js
* const viewElement = document.querySelector("arcgis-map");
* // check if the projectOperator is loaded
* if (!projectOperator.isLoaded()) {
* // load the projectOperator if it is not loaded
* projectOperator.load().then(() => {
* // change the spatial reference of the map component to equal earth projection
* viewElement.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
* viewElement.spatialReference = new SpatialReference({
* wkid: 54035 //equal earth projection
* });
* }
* ```
*/
accessor spatialReference: SpatialReference;
/**
* Indicates if the map's [spatialReference](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#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](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-gallery/) and [arcgis-basemap-toggle](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-basemap-toggle/) components and the map's spatialReference cannot be changed at runtime.
*
* @default false
* @since 4.34
*/
accessor spatialReferenceLocked: boolean;
/**
* Indication whether the view is animating, being navigated with or resizing.
*
* @default false
*/
get stationary(): boolean;
/**
* Indicates if the view is visible on the page.
*
* @default false
*/
get suspended(): boolean;
/**
* This property specifies the base colors used by some components to render graphics and labels.
*
* @since 4.28
* @see [Theme](https://developers.arcgis.com/javascript/latest/references/core/views/Theme/)
* @see [Sample - Color theming for interactive tools](https://developers.arcgis.com/javascript/latest/sample-code/view-theme/)
* @example
* ```js
* // Update the theme to use purple graphics
* // and slightly transparent green text
* view.theme = new Theme({
* accentColor: "purple",
* textColor: [125, 255, 13, 0.9]
* });
* ```
*/
accessor theme: Theme | null | undefined;
/**
* 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.
*
* @since 4.12
* @example
* ```js
* // Create a csv layer from an online spreadsheet.
* const csvLayer = new CSVLayer({
* url: "http://test.com/daily-magazines-sold-in-new-york.csv",
* t