import "@arcgis/map-components/components/arcgis-fullscreen";The Fullscreen component allows users to toggle the map or scene to fullscreen mode.
Use the escape key (esc) to exit fullscreen mode.
Known limitations
- Fullscreen only works with browsers that implement the Fullscreen API. Thus, iOS Safari is not supported.
Demo
Properties
| Property | Attribute | Type |
|---|---|---|
element | element | Element | 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 | "active" | "disabled" | "ready" | "unsupported" |
view | | LinkChartView | MapView | SceneView |
element
element: Element | stringThe HTMLElement to present in fullscreen mode.
- Attribute
- element
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
Methods
| Method | Signature |
|---|---|
componentOnReady | componentOnReady(): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
const arcgisFullscreen = document.querySelector("arcgis-fullscreen");
document.body.append(arcgisFullscreen);
await arcgisFullscreen.componentOnReady();
console.log("arcgis-fullscreen is ready to go!");- Returns
- Promise<void>
Events
| Event | Type |
|---|---|
arcgisPropertyChange | CustomEvent<{ name: "state"; }> |
arcgisReady | CustomEvent<void> |
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.