@arcgis/map-components
Version:
ArcGIS Map Components
157 lines (156 loc) • 7.14 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type LocalBasemapsSource from "@arcgis/core/widgets/BasemapGallery/support/LocalBasemapsSource.js";
import type PortalBasemapsSource from "@arcgis/core/widgets/BasemapGallery/support/PortalBasemapsSource.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { ArcgisReferenceElement, HeadingLevel } from "../types.js";
import type { BasemapProperties } from "@arcgis/core/Basemap.js";
import type { T9nMeta } from "@arcgis/lumina/controllers";
import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
import type { BasemapGalleryViewModelState } from "@arcgis/core/widgets/BasemapGallery/BasemapGalleryViewModel.js";
/**
* The Basemap Gallery component displays a collection images representing basemaps from [ArcGIS.com](https://www.arcgis.com/index.html) or a user-defined set of map or image services. When a new basemap is selected from the Basemap Gallery, the map's basemap layers are removed and replaced with the basemap layers of the associated basemap selected in the gallery.
*
* @since 4.28
*/
export abstract class ArcgisBasemapGallery extends LitElement {
/** The map's current [basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap). */
accessor activeBasemap: BasemapProperties | string | 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-basemap-gallery/#destroy) method when you are done to
* prevent memory leaks.
*
* @default false
*/
accessor autoDestroyDisabled: boolean;
/**
* When true, the component is visually withdrawn and cannot receive user interaction.
*
* @default false
*/
accessor disabled: boolean;
/**
* Indicates the heading level to use for the message "No basemaps available"
* when no basemaps are available in the Basemap Gallery.
*
* @default 2
*/
accessor headingLevel: HeadingLevel;
/**
* Icon which represents the component.
* Typically used when the component is controlled by another component (e.g. by the Expand component).
*
* @default "basemap"
* @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
*/
accessor icon: string;
/**
* The component's default label.
*
* @default ""
*/
accessor label: string;
/**
* Replace localized message strings with your own strings.
*
* _**Note**: Individual message keys may change between releases._
*/
accessor messageOverrides: {
componentLabel?: string | undefined;
noBasemaps?: string | undefined;
tagBeta?: string | undefined;
tagPreview?: string | undefined;
tag3D?: string | undefined;
unsupported?: string | undefined;
};
/** @internal */
protected messages: Partial<{
componentLabel: string;
noBasemaps: string;
tagBeta: string;
tagPreview: string;
tag3D: string;
unsupported: string;
}> & T9nMeta<{
componentLabel: string;
noBasemaps: string;
tagBeta: string;
tagPreview: string;
tag3D: string;
unsupported: string;
}>;
/**
* By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
*
* @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
*/
accessor referenceElement: ArcgisReferenceElement | string | undefined;
/**
* The source for basemaps that the component will display.
*
* @example
* Set the source from a local basemap collection.
* ```html
* <arcgis-map basemap="gray">
* <arcgis-basemap-gallery slot="top-right"></arcgis-basemap-gallery>
* </arcgis-map>
*
* <script type="module">
* const [Basemap, LocalBasemapsSource] = await $arcgis.import([
* "@arcgis/core/Basemap.js",
* "@arcgis/core/widgets/BasemapGallery/support/LocalBasemapsSource.js",
* ]);
* // get the basemap gallery element
* const basemapGallery = document.querySelector("arcgis-basemap-gallery");
*
* // set the source from a local collection of basemaps
* basemapGallery.source = new LocalBasemapsSource({
* basemaps: [Basemap.fromId("topo-vector"), Basemap.fromId("hybrid")],
* });
* </script>
* ```
* @example
* Set the source from a Portal group
* ```html
* <arcgis-map item-id="8d91bd39e873417ea21673e0fee87604">
* <arcgis-basemap-gallery slot="top-right"></arcgis-basemap-gallery>
* </arcgis-map>
*
* <script type="module">
* const PortalBasemapsSource = await $arcgis.import("@arcgis/core/widgets/BasemapGallery/support/PortalBasemapsSource.js");
* // get the basemap gallery element
* const basemapGallery = document.querySelector("arcgis-basemap-gallery");
*
* // set the source from a portal group containing basemaps with different projections
* basemapGallery.source = new PortalBasemapsSource({
* // portal: new Portal(...) // default is ArcGIS Online
* query: { id: "bdb9d65e0b5c480c8dcc6916e7f4e099" }
* });
* </script>
* ```
*/
accessor source: LocalBasemapsSource | PortalBasemapsSource;
/**
* The current state of the component.
*
* @default "disabled"
*/
get state(): BasemapGalleryViewModelState;
/**
* The view associated with the component.
* > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-basemap-gallery component will be associated with a map or scene component rather than using the `view` property.
*/
accessor view: MapViewOrSceneView | null | undefined;
/** Permanently destroy the component. */
destroy(): Promise<void>;
/** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "activeBasemap" | "state"; }>;
/** Emitted when the component associated with a map or scene view is ready to be interacted with. */
readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
readonly "@eventTypes": {
arcgisPropertyChange: ArcgisBasemapGallery["arcgisPropertyChange"]["detail"];
arcgisReady: ArcgisBasemapGallery["arcgisReady"]["detail"];
};
}