The Embedded Map component allows users to embed a saved web map with default components (i.e. zoom, legend, bookmarks) pre-configured.
Demo
Properties
| Property | Attribute | Type |
|---|---|---|
apiKey | api-key | string |
bookmarksEnabled | bookmarks-enabled | boolean |
calciteScriptOverride | calcite-script-override | string |
calciteStyleOverride | calcite-style-override | string |
centerreflected | center | Array<number> | Point | string |
extent | extent | Extent | string |
fullscreenDisabled | fullscreen-disabled | boolean |
headingEnabled | heading-enabled | boolean |
host | host | string |
informationEnabled | information-enabled | boolean |
itemId | item-id | string |
legendEnabled | legend-enabled | boolean |
portalUrl | portal-url | string |
scalereflected | scale | number | string |
scrollEnabled | scroll-enabled | boolean |
shareEnabled | share-enabled | boolean |
strictPortal | strict-portal | boolean |
theme | theme | string |
webMap | | WebMap |
apiKey
apiKey: stringAn authorization string used to access a resource or service. API keys are generated and managed in the portal. An API key is tied explicitly to an ArcGIS account; it is also used to monitor service usage.
- Attribute
- api-key
- Default value
- ""
bookmarksEnabled
bookmarksEnabled: booleanIndicates whether the bookmarks panel for the WebMap can be viewed.
- Attribute
- bookmarks-enabled
- Default value
- false
center
center: Array<number> | Point | stringRepresents the view's center point; when setting the center, you may pass an
esri/geometry/Point instance or a string representing
a longitude/latitude pair ("-100.4593, 36.9014").
Setting the center immediately changes the current view.
- Attribute
- center
extent
extent: Extent | stringThe extent represents the visible portion of a map within the view as an instance of esri/geometry/Extent.
The format of the extent is extent=“xmin,ymin,xmax,ymax,wkid”.
- Attribute
- extent
fullscreenDisabled
fullscreenDisabled: booleanIndicates whether the Fullscreen button is enabled.
- Attribute
- fullscreen-disabled
- Default value
- false
headingEnabled
headingEnabled: booleanIndicates whether the heading that displays the title of the WebMap is enabled.
- Attribute
- heading-enabled
- Default value
- false
informationEnabled
informationEnabled: booleanIndicates whether the information panel for WebMap is enabled.
- Attribute
- information-enabled
- Default value
- false
itemId
itemId: stringThe ID of a WebMap from ArcGIS Online or ArcGIS Enterprise portal.
- Attribute
- item-id
legendEnabled
legendEnabled: booleanIndicates whether the legend panel for WebMap is enabled.
- Attribute
- legend-enabled
- Default value
- false
portalUrl
portalUrl: stringThe Portal for the WebMap from ArcGIS Online or ArcGIS Enterprise portal.
Default value is https://www.arcgis.com.
- Attribute
- portal-url
- Default value
- "https://www.arcgis.com"
scale
scale: number | stringRepresents 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.
- Attribute
- scale
scrollEnabled
scrollEnabled: booleanIndicates whether the mouse wheel scroll zooming is enabled.
- Attribute
- scroll-enabled
- Default value
- false
shareEnabled
shareEnabled: booleanIndicates whether the button to open WebMap in Map Viewer is enabled.
- Attribute
- share-enabled
- Default value
- false
theme
theme: stringThe light or dark theme of the component.
Default value is light.
- Attribute
- theme
- Default value
- "light"
Methods
| Method | Signature |
|---|---|
componentOnReady | componentOnReady(): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
const arcgisEmbeddedMap = document.querySelector("arcgis-embedded-map");
document.body.append(arcgisEmbeddedMap);
await arcgisEmbeddedMap.componentOnReady();
console.log("arcgis-embedded-map is ready to go!");- Returns
- Promise<void>