arcgis-feature | References | ArcGIS Maps SDK for JavaScript

ESM

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

Inheritance:: ArcgisFeature→PublicLitElement

Since: ArcGIS Maps SDK for JavaScript 4.28

The Feature component displays a graphic according to its PopupTemplate. This component is useful in instances where you want to display information about a feature but without the use of a Popup.

If wanting to show a feature's content with actions, related, or clustering, etc., then use the arcgis-features component.

When Arcade expressions that use $map or geometry functions are defined in any popup template content or as expression elements, the map and spatialReference properties need to be defined in the Feature component.

See also

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`chartAnimationDisabled`	`chart-animation-disabled`	`boolean \| undefined`
`defaultPopupTemplateEnabled`	`default-popup-template-enabled`	`boolean`
`graphic`		`Graphic \| null \| undefined`
`heading` readonly		`string`
`headingLevel`	`heading-level`	`HeadingLevel`
`hideAttachmentsContent`	`hide-attachments-content`	`boolean`
`hideContent`	`hide-content`	`boolean`
`hideCustomContent`	`hide-custom-content`	`boolean`
`hideExpressionContent`	`hide-expression-content`	`boolean`
`hideFieldsContent`	`hide-fields-content`	`boolean`
`hideHeading`	`hide-heading`	`boolean`
`hideLastEditedInfo`	`hide-last-edited-info`	`boolean`
`hideMediaContent`	`hide-media-content`	`boolean`
`hideTextContent`	`hide-text-content`	`boolean`
`icon`	`icon`	`string \| undefined`
`isFeatureFromTable` readonly		`boolean`
`label`	`label`	`string \| undefined`
`location`		`Point \| null \| undefined`
`map`		`Map \| null \| undefined`
`messageOverrides`		`Record<string, unknown> \| undefined`
`referenceElement`	`reference-element`	`ArcgisReferenceElement \| string \| undefined`
`showRelationshipContent`	`show-relationship-content`	`boolean`
`showUtilityNetworkContent`	`show-utility-network-content`	`boolean`
`spatialReference`		`SpatialReference \| null \| undefined`
`state` readonly		`State`
`timeZone`	`time-zone`	`string`
`view`		`MapViewOrSceneView \| null \| undefined`
`viewModel`		`FeatureViewModel`

autoDestroyDisabled

Property

Type: 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

chartAnimationDisabled

Property

Type: boolean | undefined

Since: ArcGIS Maps SDK for JavaScript 4.34

Disables chart animation within the component.

Attribute: chart-animation-disabled
Default value: false

defaultPopupTemplateEnabled

Property

Type: boolean

Enables automatic creation of a popup template for layers that have popups enabled but no popupTemplate defined. Automatic popup templates are supported for layers that support the createPopupTemplate() method. (Supported for FeatureLayer, GeoJSONLayer, SceneLayer, CSVLayer, OGCFeatureLayer PointCloudLayer, StreamLayer, and ImageryLayer).

Note: Starting with version 4.28, date fields are formatted using the short-date-short-time preset dateFormat rather than long-month-day-year in the default popup created by setting the defaultPopupTemplateEnabled property to true. For example, previously a date that may have appeared as "December 30, 1997" will now appear as "12/30/1997 6:00 PM".

Attribute: default-popup-template-enabled
Default value: false

graphic

Property

Type: Graphic | null | undefined

The Graphic used to represent the feature.

See also

PopupTemplate.content

Default value: null

Example

let graphic = new Graphic({
  geometry: view.center,
  attributes: {
    name: "Spruce",
    family: "Pinaceae",
    count: 126
  },
  symbol: new SimpleMarkerSymbol({
    style: "square",
    color: "blue",
    size: "8px"
  }),
  popupTemplate: {
    content: [
      {
        // Set popup template content
      }
    ]
  }
});

heading

readonly Property

Type: string

Since: ArcGIS Maps SDK for JavaScript 4.34

The title for the feature. This can be disabled by setting the hideHeading property to true.

See also

Default value: null

headingLevel

Property

Type: HeadingLevel

Indicates the heading level to use for the heading of the component. By default, the title is rendered as a level 2 heading (e.g. <h2>Title of content</h2>). Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

See also

Heading Elements

Attribute: heading-level
Default value: 2

Example

// feature title will render as an

feature.headingLevel = 3;

hideAttachmentsContent

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

This property provides the ability to hide or show attachments content within the component.

Attribute: hide-attachments-content
Default value: false

hideContent

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

This property provides the ability to hide or show content within the component.

Attribute: hide-content
Default value: false

hideCustomContent

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

This property provides the ability to hide or show custom content within the component.

Attribute: hide-custom-content
Default value: false

hideExpressionContent

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

This property provides the ability to hide or show expression content within the component.

Attribute: hide-expression-content
Default value: false

hideFieldsContent

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

This property provides the ability to hide or show fields content within the component.

Attribute: hide-fields-content
Default value: false

hideHeading

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

This property provides the ability to hide or show the component's heading.

Attribute: hide-heading
Default value: false

hideLastEditedInfo

Property

Type: boolean

This property provides the ability to hide or show the last edited info within the component.

Attribute: hide-last-edited-info
Default value: false

hideMediaContent

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

This property provides the ability to hide or show media content within the component.

Attribute: hide-media-content
Default value: false

hideTextContent

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

This property provides the ability to hide or show text content within the component.

Attribute: hide-text-content
Default value: false

icon

Property

Type: string | undefined

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

Calcite Icons

Attribute: icon
Default value: "icon"

isFeatureFromTable

readonly Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

Indicates whether the current graphic resides in a non-spatial table.

Default value: false

label

Property

Type: string | undefined

The component's default label.

Attribute: label

location

Property

Type: Point | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.29

The Point representing the location of the map interaction used to trigger the opening of the component.

See also

Example

view.on("click", (event) => {
  const { mapPoint } = event;
  feature.viewModel.location = mapPoint;
});

map

Property

Type: Map | null | undefined

A map is required when the input graphic has a popupTemplate that contains Arcade expressions in ExpressionInfo or ExpressionContent that may use the $map profile variable to access data from layers within a map. Without a map, expressions that use $map will throw an error.

See also

Default value: null

Example

// The building footprints represent the buildings that intersect a clicked parcel let buildingFootprints = Intersects($feature, FeatureSetByName($map, "Building Footprints"));

messageOverrides

Property

Type: Record<string, unknown> | undefined

Since: ArcGIS Maps SDK for JavaScript 4.34

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

referenceElement

Property

Type: ArcgisReferenceElement | string | undefined

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 also

Associate components with a Map or Scene component

Attribute: reference-element

showRelationshipContent

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

This property provides the ability to hide or show relationship content within the component.

Attribute: show-relationship-content
Default value: false

showUtilityNetworkContent

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.34

This property provides the ability to hide or show utility network content within the component.

Attribute: show-utility-network-content
Default value: false

spatialReference

Property

Type: SpatialReference | null | undefined

The spatial reference used for Arcade operations. This property should be set if the component executes Arcade expressions that contain geometry functions.

See also

Default value: null

state

readonly Property

Type: State

The current state of the component.

Default value: "disabled"

timeZone

Property

Type: string

Since: ArcGIS Maps SDK for JavaScript 4.29

Dates and times displayed in the component will be displayed in this time zone. By default this time zone is inherited from MapView.timeZone. When a MapView is not associated with the component, then the property will fallback to the system time zone.

Possible Values

system: Dates and times will be displayed in the timezone of the device or browser.
unknown: Dates and time are not adjusted for any timezone.
Specified IANA timezone: Dates and times will be displayed in the specified IANA time zone. See wikipedia - List of tz database time zones.

Attribute: time-zone

view

Property

Type: MapViewOrSceneView | null | undefined

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-feature component will be associated with a map or scene component rather than using the view property.

viewModel

Property

Type: FeatureViewModel

Since: ArcGIS Maps SDK for JavaScript 4.34

Methods

Method	Signature
`componentOnReady` inherited	`componentOnReady(): Promise<this>`
`destroy`	`destroy(): Promise<void>`
`nextMedia`	`nextMedia(contentElementIndex: number): Promise<void>`
`previousMedia`	`previousMedia(contentElementIndex: number): Promise<void>`
`setActiveMedia`	`setActiveMedia(contentElementIndex: number, mediaInfoIndex: number): Promise<void>`
`updateGeometry`	`updateGeometry(): Promise<void>`

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: PublicLitElement

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisFeature = document.querySelector("arcgis-feature");
document.body.append(arcgisFeature);
await arcgisFeature.componentOnReady();
console.log("arcgis-feature is ready to go!");

destroy

Method

Signature: destroy (): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

nextMedia

Method

Signature: nextMedia (contentElementIndex: number): Promise<void>

Paginates to the next media info.

Parameters

Parameter	Type	Description	Required
contentElementIndex	`number`

Returns: Promise<void>

previousMedia

Method

Signature: previousMedia (contentElementIndex: number): Promise<void>

Paginates to the previous media info.

Parameters

Parameter	Type	Description	Required
contentElementIndex	`number`

Returns: Promise<void>

setActiveMedia

Method

Signature: setActiveMedia (contentElementIndex: number, mediaInfoIndex: number): Promise<void>

Paginates to a specified media info object. For example, you may have media content which contains multiple mediaInfos. This method allows you to specify the index of the mediaInfos you wish to display.

Parameters

Parameter	Type	Description	Required
contentElementIndex	`number`
mediaInfoIndex	`number`

Returns: Promise<void>

updateGeometry

Method

Signature: updateGeometry (): Promise<void>

Since: ArcGIS Maps SDK for JavaScript 4.34

Updates the geometry of the graphic.

Returns: Promise<void>

Events

Name	Type
`arcgisPropertyChange`	CustomEvent<{ name: "flowItems" \| "state"; }>
`arcgisReady`	CustomEvent<void>

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "flowItems" | "state"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

arcgisReady

Event

arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is ready to be interacted with.