@arcgis/map-components

/// <reference types="@arcgis/core/interfaces.d.ts" /> /// <reference types="../../index.d.ts" /> import { Use } from '@arcgis/lumina/controllers'; import { Nil } from '@arcgis/components-utils'; import { default as MapView } from '@arcgis/core/views/MapView.js'; import { default as WebMap } from '@arcgis/core/WebMap.js'; import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina'; declare const useWebMap: (component: LitElement & Omit<Pick<WebMap, "basemap" | "focusAreas" | "ground" | "ipsInfo" | "layers" | "bookmarks" | "tables" | "presentation" | "widgets" | "applicationProperties" | "authoringApp" | "authoringAppVersion" | "floorInfo" | "geotriggersInfo" | "initialViewProperties" | "portalItem" | "thumbnailUrl" | "utilityNetworks">, "basemap" | "ground" | ("destroyed" | "initialized" | "declaredClass" | "set" | "watch" | "addHandles" | "removeHandles" | "hasHandles") | "layers" | "bookmarks" | "tables" | "presentation" | "widgets" | "applicationProperties" | "authoringApp" | "authoringAppVersion" | "floorInfo" | "geotriggersInfo" | "initialViewProperties" | "portalItem" | "thumbnailUrl" | "utilityNetworks"> & { autoDestroyDisabled: boolean; destroy: () => Promise<void>; }) => WebMap; declare const useMapView: (component: LitElement & Omit<Pick<MapView, "container" | "map" | "background" | "basemapView" | "center" | "constraints" | "extent" | "fatalError" | "graphics" | "highlights" | "navigation" | "padding" | "popup" | "resizeAlign" | "rotation" | "scale" | "spatialReference" | "theme" | "timeExtent" | "timeZone" | "viewpoint" | "zoom" | "floors" | "highlightOptions" | "breakpoints" | "heightBreakpoint" | "popupEnabled" | "spatialReferenceLocked" | "widthBreakpoint" | "ui" | "animation" | "displayFilterEnabled">, "container" | ("destroyed" | "initialized" | "declaredClass" | "set" | "watch" | "addHandles" | "removeHandles" | "hasHandles") | "breakpoints" | "heightBreakpoint" | "popupEnabled" | "spatialReferenceLocked" | "widthBreakpoint" | "ui" | "animation" | "displayFilterEnabled"> & { autoDestroyDisabled: boolean; destroy: () => Promise<void>; }) => MapView; /** * The ArcGIS Map component is used to add 2D maps to web applications. For 3D maps, use the * [ArcGIS Scene component](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/). * * The Map component creates a [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) and loads a WebMap from either [ArcGIS Online](https://www.arcgis.com/home/index.html) or [ArcGIS Enterprise portal](https://enterprise.arcgis.com/en/portal/latest/administer/windows/what-is-portal-for-arcgis-.htm). * * ```html * <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map> * ``` * * Alternatively, the Map component can be initialized without a WebMap item. * * ```html * <arcgis-map basemap="satellite" center="-154.88, 19.46" zoom="15"></arcgis-map> * ``` * * Other components can be added and connected to the Map component. * * ```html * <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"> * <arcgis-zoom position="top-left"></arcgis-zoom> * <arcgis-legend position="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/api-reference/) 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/) * * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/) */ export declare class ArcgisMap extends LitElement { /** The [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) instance created and manged by the component. Accessible once the component is fully loaded. */ readonly view: MapView; /** * Collection containing a flat list of all the created LayerViews * related to the basemap, operational layers, and group layers in this view. */ readonly allLayerViews: __esri.Collection<__esri.LayerView>; /** * 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/arcgis-map/#destroy) method when you are done to * prevent memory leaks. * * @default false */ autoDestroyDisabled: boolean; /** * 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 null */ background: nullish | __esri.ColorBackground; /** * 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](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap)), * [Basemap](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html) * or [BasemapStyle](https://developers.arcgis.com/javascript/latest/api-reference/esri-support-BasemapStyle.html). * * [Read more](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap) */ basemap?: __esri.Basemap | string; /** Represents the view for a single basemap after it has been added to the map. */ basemapView: __esri.BasemapView; /** * 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. */ get center(): __esri.MapView["center"]; set center(newValue: __esri.MapView["center"] | Nil | number[] | string); /** Specifies constraints to scale, zoom, and rotation that may be applied to the MapView. */ constraints: __esri.View2DConstraints; /** * Indicates whether layer's displayFilter are honored when rendering layers in the view. * If `false`, display filters are ignored and all features are rendered. * * @default false */ displayFilterDisabled: boolean; /** * 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. */ get extent(): __esri.MapView["extent"]; set extent(newValue: __esri.MapView["extent"]); /** A rejected view indicates a fatal error making it unable to display. */ fatalError: nullish | __esri.Error; /** * 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. */ floors: __esri.Collection<string>; /** Gamepad input specific configuration settings. */ get gamepad(): __esri.GamepadSettings; /** * Allows for adding graphics directly to the default graphics in the View. * * @example * ```js * // Adds a graphic to the View * graphics.add(pointGraphic); * ``` * @example * ```js * // Removes a graphic from the View * graphics.remove(pointGraphic); * ``` */ graphics: __esri.Collection<__esri.Graphic>; /** Specifies the surface properties for the map. */ get ground(): typeof this._map.ground; set ground(value: __esri.Ground | string); /** * The highlights property is a collection of HighlightGroup objects that * allow you to visually emphasize specific features on the map. */ highlights: __esri.Collection<__esri.HighlightOptions>; /** * Options for configuring the highlight. * * @deprecated * since 4.33, use [highlights](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/#highlights) instead. * * 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. */ highlightOptions: __esri.HighlightOptions; /** * Indication whether the view is being interacted with (for example when panning or by an interactive tool). * * @default false */ get interacting(): boolean; /** Contains indoor positioning system information for the map. */ ipsInfo: nullish | __esri.IPSInfo; /** * 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/api-reference/esri-config.html#portalUrl) before the Map component loads. */ get itemId(): Nil | string; set itemId(newValue: Nil | string); /** * 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. */ readonly layerViews: __esri.Collection<__esri.LayerView>; /** The magnifier allows for showing a portion of the view as a magnifier image on top of the view. */ readonly magnifier: __esri.Magnifier; /** An instance of a esri/Map object to display in the view. */ map: __esri.Map | nullish; /** * 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. */ navigation: __esri.Navigation; /** * Use the padding property to make the [center](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#center), * and [extent](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#extent), etc. * * @default {left: 0, top: 0, right: 0, bottom: 0} */ padding: __esri.ViewPadding; /** * A [Popup](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html) object that displays general content or attributes from * [layers](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#layers) in the [map](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#map). * * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#popup) */ popup: nullish | __esri.Popup; /** * Controls whether the popup opens when users click on the view. * * @default false */ popupDisabled: boolean; /** * When `true`, this property indicates whether the view successfully satisfied all dependencies, * signaling that the following conditions are met. * * @default false */ readonly 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" */ resizeAlign: "center" | "bottom-left" | "bottom-right" | "top-left" | "top-right" | "left" | "right" | "top" | "bottom"; /** * 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. */ readonly 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](#constraints) to `false`. See the code snippet below for * an example of this. * * @default 0 */ 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() method. */ get scale(): number; set scale(newValue: number); /** * The spatial reference of the view. * This indicates the projected or geographic coordinate system used * to locate geographic features in the map. * * @default null */ spatialReference: __esri.SpatialReference; /** * 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 true */ readonly suspended: boolean; /** * This property specifies the base colors used by some widgets * and components to render graphics and labels. * * @default null */ theme: nullish | __esri.Theme; /** * 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 null */ timeExtent: nullish | __esri.TimeExtent; /** * 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. * * @default "system" */ timeZone: string; /** * Indicates whether the view is being updated by additional data requests to the network, * or by processing received data. * * @default false */ readonly updating: boolean; /** * 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. */ get viewpoint(): __esri.Viewpoint; set viewpoint(newValue: __esri.Viewpoint); /** * The visibleArea represents the visible portion of a [map](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html) within the view as * an instance of a [Polygon](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Polygon.html). * * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#visibleArea) */ readonly visibleArea: nullish | __esri.Polygon; /** * 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. */ get zoom(): number; set zoom(newValue: number); /** * @deprecated * since 4.33, use `element.map.add(layer)` instead. * * Adds a layer to the map layers collection. */ addLayer(layer: __esri.Layer | Promise<any>, index?: number): Promise<void>; /** * @deprecated * since 4.33, use `element.map.addMany([layer])` instead. * * Adds a layer or array of layers to the map layers collection. */ addLayers(layers: __esri.Layer[], index?: number): Promise<void>; /** * @deprecated * since 4.33, use `element.map.tables.add(table)` instead. * * Adds a table to the map tables collection. */ addTable(table: __esri.FeatureLayer): Promise<void>; /** * @deprecated * since 4.33, use `element.map.tables.addMany([table])` instead. * * Adds a table or array of tables to the map tables collection. */ addTables(tables: __esri.FeatureLayer[], index?: number): Promise<void>; /** Closes the popup. */ closePopup(): Promise<void>; /** Destroys the view, and any associated resources, including its map, popup, and UI elements. */ destroy(): Promise<void>; /** Sets the view to a given target. */ goTo(target: __esri.GoToTarget2D, options?: __esri.GoToOptions2D): Promise<unknown>; /** Returns hit test results from each layer that intersects the specified screen coordinates. */ hitTest(screenPoint: __esri.MapViewScreenPoint | MouseEvent, options?: __esri.MapViewHitTestOptions): Promise<__esri.HitTestResult>; /** * Opens the popup at the given location with content defined either explicitly with content or driven * from the PopupTemplate of input features. */ openPopup(options?: __esri.PopupViewOpenPopupOptions): Promise<void>; /** Create a screenshot of the current view. */ takeScreenshot(options?: __esri.MapViewTakeScreenshotOptions): Promise<__esri.Screenshot>; toMap(screenPoint: __esri.MapViewScreenPoint | MouseEvent): __esri.Point; toScreen(point: __esri.Point, options?: __esri.ToScreenOptions2D): __esri.MapViewScreenPoint | nullish; /** Call this method to clear any fatal errors resulting from a lost WebGL context. */ tryFatalErrorRecovery(): Promise<void>; /** Gets the LayerView created on the view for the given layer. */ whenLayerView(layer: __esri.Layer): Promise<__esri.LayerView>; /** * `viewOnReady()` may be leveraged once an instance of the component and its underlying [view](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/#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. * * @since 4.33 * @see [Watch for changes - waiting for components or views to be ready](https://developers.arcgis.com/javascript/latest/watch-for-changes/#waiting-for-components-or-views-to-be-ready) * @example * ```js * const viewElement = document.querySelector("arcgis-map"); * await viewElement.viewOnReady(); * // The view is now ready to be used. * viewElement.map.add(new FeatureLayer({...})); * ``` */ viewOnReady(callback?: () => void, errback?: (error: Error) => void): Promise<void>; /** * 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. */ readonly arcgisViewChange: TargetedEvent<this, void>; /** Fires after a user clicks on the view. */ readonly arcgisViewClick: TargetedEvent<this, __esri.ViewClickEvent>; /** Fires after double-clicking on the view. */ readonly arcgisViewDoubleClick: TargetedEvent<this, __esri.ViewDoubleClickEvent>; /** Fires during a pointer drag on the view. */ readonly arcgisViewDrag: TargetedEvent<this, __esri.ViewDragEvent>; /** Fires during a pointer drag on the view. */ readonly arcgisViewHold: TargetedEvent<this, __esri.ViewHoldEvent>; /** Fires right after a user clicks on the view. */ readonly arcgisViewImmediateClick: TargetedEvent<this, __esri.ViewImmediateClickEvent>; /** Is emitted after two consecutive immediate-click events. */ readonly arcgisViewImmediateDoubleClick: TargetedEvent<this, __esri.ViewImmediateDoubleClickEvent>; /** Fires after a keyboard key is pressed. */ readonly arcgisViewKeyDown: TargetedEvent<this, __esri.ViewKeyDownEvent>; /** Fires after a keyboard key is pressed. */ readonly arcgisViewKeyUp: TargetedEvent<this, __esri.ViewKeyUpEvent>; /** Fires after each layer in the map has a corresponding LayerView created and rendered in the view. */ readonly arcgisViewLayerviewCreate: TargetedEvent<this, __esri.ViewLayerviewCreateEvent>; /** Fires when an error emits during the creation of a LayerView after a layer has been added to the map. */ readonly arcgisViewLayerviewCreateError: TargetedEvent<this, __esri.ViewLayerviewCreateErrorEvent>; /** Fires after a LayerView is destroyed and is no longer rendered in the view. */ readonly arcgisViewLayerviewDestroy: TargetedEvent<this, __esri.ViewLayerviewDestroyEvent>; /** Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view. */ readonly arcgisViewMouseWheel: TargetedEvent<this, __esri.ViewMouseWheelEvent>; /** Fires after a mouse button is pressed, or a finger touches the display. */ readonly arcgisViewPointerDown: TargetedEvent<this, __esri.ViewPointerDownEvent>; /** Fires after a mouse cursor enters the view, or a display touch begins. */ readonly arcgisViewPointerEnter: TargetedEvent<this, __esri.ViewPointerEnterEvent>; /** Fires after a mouse cursor leaves the view, or a display touch ends. */ readonly arcgisViewPointerLeave: TargetedEvent<this, __esri.ViewPointerLeaveEvent>; /** Fires after the mouse or a finger on the display moves. */ readonly arcgisViewPointerMove: TargetedEvent<this, __esri.ViewPointerMoveEvent>; /** Fires after a mouse button is released, or a display touch ends. */ readonly arcgisViewPointerUp: TargetedEvent<this, __esri.ViewPointerUpEvent>; /** * 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. */ readonly arcgisViewReadyChange: TargetedEvent<this, void>; private _map: __esri.Map; readonly _setterTypes: { center?: __esri.MapView["center"] | Nil | number[] | string; ground?: __esri.Ground | string; }; } export {};