import "@arcgis/map-components/components/arcgis-home";The Home component is a button that navigates back to the
initial Viewpoint
or a previously defined viewpoint.
Example
// Create viewpoint centered on extent of a polygon geometry
let vp = new Viewpoint({
targetGeometry: geom.extent
});
// Sets the Home's viewpoint to that Viewpoint
home.viewpoint = vp;Demo
Properties
| Property | Attribute | Type |
|---|---|---|
autoDestroyDisabled | auto-destroy-disabled | boolean |
goToOverride | | (((view: MapView | SceneView, goToParameters: GoToParameters) => void)) |
icon | icon | string |
label | label | string |
messageOverrides | | Record<string, unknown> |
positiondeprecatedreflected | position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" |
referenceElement | reference-element | HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string |
statereadonlyreflected | state | "disabled" | "going-home" | "ready" |
view | | MapView | SceneView |
viewpoint | | Viewpoint |
autoDestroyDisabled
autoDestroyDisabled: booleanIf 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
goToOverride
goToOverride: (((view: MapView | SceneView, goToParameters: GoToParameters) => void))This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.
icon
icon: stringIcon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).
- See also
- Attribute
- icon
- Default value
- "home"
messageOverrides
messageOverrides: Record<string, unknown>Replace localized message strings with your own strings.
Note: Individual message keys may change between releases.
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"slot instead.- Attribute
- position
referenceElement
referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | stringBy 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.
- Attribute
- reference-element
state
state: "disabled" | "going-home" | "ready"The current state of the component.
- Attribute
- state
- Default value
- "disabled"
view
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
viewproperty which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Home component will be associated with a map or scene component rather than using theviewproperty.
viewpoint
viewpoint: ViewpointThe Viewpoint to go to when going "home". The initial value is determined in a few different ways:
If no referenceElement is provided, the value is null.
Once the referenceElement is ready, the initial viewpoint value is the user-defined Viewpoint.
Example
// Create viewpoint centered on extent of a polygon geometry
let vp = new Viewpoint({
targetGeometry: geom.extent
});
// Sets the Home's viewpoint to that Viewpoint
home.viewpoint = vp;- Default value
- null
Methods
| Method | Signature |
|---|---|
cancelGo | cancelGo(): Promise<void> |
componentOnReady | componentOnReady(): Promise<void> |
destroy | destroy(): Promise<void> |
go | go(): Promise<void> |
cancelGo
cancelGo(): Promise<void>This function provides the ability to interrupt and cancel the process of navigating back to the initial extent.
- Returns
- Promise<void>
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
const arcgisHome = document.querySelector("arcgis-home");
document.body.append(arcgisHome);
await arcgisHome.componentOnReady();
console.log("arcgis-home is ready to go!");- Returns
- Promise<void>
go
go(): Promise<void>Animates the map or scene to its initial Viewpoint or the
value of viewpoint.
- Returns
- Promise<void>
Events
| Event | Type |
|---|---|
arcgisGo | CustomEvent<HomeViewModelGoEvent> |
arcgisPropertyChange | CustomEvent<{ name: "state"; }> |
arcgisReady | CustomEvent<void> |
arcgisGo
arcgisGo: CustomEvent<HomeViewModelGoEvent>Fires when the go() method is called.
Example
home.addEventListener("arcgisGo", (event) => {
console.log("updating viewpoint");
});arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "state"; }>Emitted when the value of a property is changed. Use this to listen to changes to properties.
arcgisReady
arcgisReady: CustomEvent<void>Emitted when the component associated with a map or scene view is ready to be interacted with.