Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/ below:

Map | ArcGIS Maps SDK for JavaScript 4.33

Use dark colors for code blocks Copy

1
import "@arcgis/map-components/components/arcgis-map";

No specific import is needed for this component.

The ArcGIS Map component is used to add 2D maps to web applications. For 3D maps, use the ArcGIS Scene component.

The Map component creates a MapView and loads a WebMap from either ArcGIS Online or ArcGIS Enterprise portal.

Use dark colors for code blocks Copy

1
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>

Alternatively, the Map component can be initialized without a WebMap item.

Use dark colors for code blocks Copy

1
<arcgis-map basemap="satellite" center="-154.88, 19.46" zoom="15"></arcgis-map>

Other components can be added and connected to the Map component.

Use dark colors for code blocks Copy

1
2
3
4
<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 of the ArcGIS Maps SDK for JavaScript.

Use dark colors for code blocks Copy

1
2
3
4
5
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
• Get started
• Programming patterns

readonlyProperty

Collection containing a flat list of all the created LayerViews related to the basemap, operational layers, and group layers in this view.

Property

autoDestroyDisabled: boolean

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 method when you are done to prevent memory leaks.

Attribute

auto-destroy-disabled

Default value

false

Property

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 value

null

Property

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), Basemap or BasemapStyle.

Read more

Attribute

basemap

Property

Represents the view for a single basemap after it has been added to the map.

Property

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.

Attribute

center

Property

constraints: View2DConstraints

Specifies constraints to scale, zoom, and rotation that may be applied to the MapView.

Property

displayFilterDisabled: boolean

Indicates whether layer's displayFilter are honored when rendering layers in the view. If false, display filters are ignored and all features are rendered.

Attribute

display-filter-disabled

Default value

false

Property

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.

Property

A rejected view indicates a fatal error making it unable to display.

Property

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.

readonlyProperty

Gamepad input specific configuration settings.

Property

Allows for adding graphics directly to the default graphics in the View.

Use dark colors for code blocks Copy

1
2
// Adds a graphic to the View
graphics.add(pointGraphic);

Use dark colors for code blocks Copy

1
2
// Removes a graphic from the View
graphics.remove(pointGraphic);

Property

Specifies the surface properties for the map.

Attribute

ground

deprecatedProperty

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.

Options for configuring the highlight.

Property

The highlights property is a collection of HighlightGroup objects that allow you to visually emphasize specific features on the map.

readonlyProperty

interacting: boolean

Indication whether the view is being interacted with (for example when panning or by an interactive tool).

Default value

false

Property

Contains indoor positioning system information for the map.

itemId: string

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 before the Map component loads.

Attribute

item-id

readonlyProperty

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.

readonlyProperty

The magnifier allows for showing a portion of the view as a magnifier image on top of the view.

Property

An instance of a esri/Map object to display in the view.

readonlyProperty

navigating: boolean

Indication whether the view is being navigated (for example when panning).

Default value

false

Property

Options to configure the navigation behavior of the View.

Property

padding: ViewPadding

Use the padding property to make the center, and extent, etc.

Default value

{left: 0, top: 0, right: 0, bottom: 0}

Property

A Popup object that displays general content or attributes from layers in the map.

Read more...

Property

popupDisabled: boolean

Controls whether the popup opens when users click on the view.

Attribute

popup-disabled

Default value

false

readonlyProperty

ready: boolean

When true, this property indicates whether the view successfully satisfied all dependencies, signaling that the following conditions are met.

Default value

false

Property

resizeAlign: "bottom" | "bottom-left" | "bottom-right" | "center" | "left" | "right" | "top" | "top-left" | "top-right"

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.

Attribute

resize-align

Default value

"center"

readonlyProperty

resolution: number

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.

Property

rotation: 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 to false. See the code snippet below for an example of this.

Attribute

rotation

Default value

0

Property

scale: 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.

Attribute

scale

Property

The spatial reference of the view. This indicates the projected or geographic coordinate system used to locate geographic features in the map.

Default value

null

readonlyProperty

stationary: boolean

Indication whether the view is animating, being navigated with or resizing.

Default value

false

suspended: boolean

Indicates if the view is visible on the page.

Attribute

suspended

Default value

true

Property

This property specifies the base colors used by some widgets and components to render graphics and labels.

Default value

null

Property

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 value

null

Property

timeZone: string

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.

Attribute

time-zone

Default value

"system"

readonlyProperty

updating: boolean

Indicates whether the view is being updated by additional data requests to the network, or by processing received data.

Default value

false

readonlyProperty

The MapView instance created and manged by the component. Accessible once the component is fully loaded.

Property

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.

readonlyProperty

The visibleArea represents the visible portion of a map within the view as an instance of a Polygon.

Read more...

Property

zoom: number

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.

Attribute

zoom

No slots to display.

Event

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.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after a user clicks on the view.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after double-clicking on the view.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires during a pointer drag on the view.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires during a pointer drag on the view.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires right after a user clicks on the view.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Is emitted after two consecutive immediate-click events.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after a keyboard key is pressed.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after a keyboard key is pressed.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after each layer in the map has a corresponding LayerView created and rendered in the view.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires when an error emits during the creation of a LayerView after a layer has been added to the map.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after a LayerView is destroyed and is no longer rendered in the view.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires when a wheel button of a pointing device (typically a mouse) is scrolled on the view.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after a mouse button is pressed, or a finger touches the display.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after a mouse cursor enters the view, or a display touch begins.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after a mouse cursor leaves the view, or a display touch ends.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after the mouse or a finger on the display moves.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

Fires after a mouse button is released, or a display touch ends.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Event

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.

Events triggered on this element will be propagated to their outermost elements.

The event is composable and will propagate across the shadow DOM into the standard DOM.

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

deprecated

addLayer(layer: __esri.Layer | Promise<any>, index?: number): Promise<void>

deprecated

addLayers(layers: __esri.Layer[], index?: number): Promise<void>

deprecated

addTable(table: __esri.FeatureLayer): Promise<void>

deprecated

addTables(tables: __esri.FeatureLayer[], index?: number): Promise<void>

closePopup(): Promise<void>

componentOnReady(): Promise<void>

destroy(): Promise<void>

goTo(target: __esri.GoToTarget2D, options?: __esri.GoToOptions2D): Promise<unknown>

hitTest(screenPoint: __esri.MapViewScreenPoint | MouseEvent, options?: __esri.MapViewHitTestOptions): Promise<__esri.HitTestResult>

openPopup(options?: __esri.PopupViewOpenPopupOptions): Promise<void>

takeScreenshot(options?: __esri.MapViewTakeScreenshotOptions): Promise<__esri.Screenshot>

toMap(screenPoint: __esri.MapViewScreenPoint | MouseEvent): __esri.Point

toScreen(point: __esri.Point, options?: __esri.ToScreenOptions2D): __esri.MapViewScreenPoint | nullish

tryFatalErrorRecovery(): Promise<void>

viewOnReady(callback?: (): void, errback?: (error: Error) => void): Promise<void>

whenLayerView(layer: __esri.Layer): Promise<__esri.LayerView>

deprecatedMethod

addLayer(layer: __esri.Layer | Promise<any>, index?: number): Promise<void>

Deprecatedsince 4.33, use element.map.add(layer) instead.

Adds a layer to the map layers collection.

layer

index

number | undefined

Returns

Promise<void>

deprecatedMethod

addLayers(layers: __esri.Layer[], index?: number): Promise<void>

Deprecatedsince 4.33, use element.map.addMany([layer]) instead.

Adds a layer or array of layers to the map layers collection.

layers

index

number | undefined

Returns

Promise<void>

deprecatedMethod

addTable(table: __esri.FeatureLayer): Promise<void>

Deprecatedsince 4.33, use element.map.tables.add(table) instead.

Adds a table to the map tables collection.

Returns

Promise<void>

deprecatedMethod

addTables(tables: __esri.FeatureLayer[], index?: number): Promise<void>

Deprecatedsince 4.33, use element.map.tables.addMany([table]) instead.

Adds a table or array of tables to the map tables collection.

tables

index

number | undefined

Returns

Promise<void>

Method

closePopup(): Promise<void>

Closes the popup.

Returns

Promise<void>

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Use dark colors for code blocks Copy

1
2
3
4
const arcgisMap = document.querySelector("arcgis-map");
document.body.append(arcgisMap);
await arcgisMap.componentOnReady();
console.log("arcgis-map is ready to go!");

Returns

Promise<void>

Method

destroy(): Promise<void>

Destroys the view, and any associated resources, including its map, popup, and UI elements.

Returns

Promise<void>

Method

goTo(target: __esri.GoToTarget2D, options?: __esri.GoToOptions2D): Promise<unknown>

Sets the view to a given target.

target

any

options

Returns

Promise<unknown>

Method

hitTest(screenPoint: __esri.MapViewScreenPoint | MouseEvent, options?: __esri.MapViewHitTestOptions): Promise<__esri.HitTestResult>

Returns hit test results from each layer that intersects the specified screen coordinates.

Returns

Promise<HitTestResult>

Method

openPopup(options?: __esri.PopupViewOpenPopupOptions): Promise<void>

Opens the popup at the given location with content defined either explicitly with content or driven from the PopupTemplate of input features.

options

PopupViewOpenPopupOptions | undefined

Returns

Promise<void>

Method

takeScreenshot(options?: __esri.MapViewTakeScreenshotOptions): Promise<__esri.Screenshot>

Create a screenshot of the current view.

options

MapViewTakeScreenshotOptions | undefined

Returns

Promise<Screenshot>

Method

toMap(screenPoint: __esri.MapViewScreenPoint | MouseEvent): __esri.Point

Returns

Point

Method

toScreen(point: __esri.Point, options?: __esri.ToScreenOptions2D): __esri.MapViewScreenPoint | nullish

Returns

MapViewScreenPoint | null | undefined

Method

tryFatalErrorRecovery(): Promise<void>

Call this method to clear any fatal errors resulting from a lost WebGL context.

Returns

Promise<void>

Method

viewOnReady(callback?: (): void, errback?: (error: Error) => void): Promise<void>

viewOnReady() may be leveraged once an instance of the component and its underlying 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.

See also

• Watch for changes - waiting for components or views to be ready

Use dark colors for code blocks Copy

1
2
3
4
const viewElement = document.querySelector("arcgis-map");
await viewElement.viewOnReady();
// The view is now ready to be used.
viewElement.map.add(new FeatureLayer({...}));

callback

((() => void)) | undefined

errback

(((error: Error) => void)) | undefined

Returns

Promise<void>

Method

whenLayerView(layer: __esri.Layer): Promise<__esri.LayerView>

Gets the LayerView created on the view for the given layer.

layer

Returns

Promise<LayerView>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4