FeaturesModel | References | ArcGIS Maps SDK for JavaScript

import FeaturesModel from "@arcgis/core/popup/FeaturesModel.js";

const FeaturesModel = await $arcgis.import("@arcgis/core/popup/FeaturesModel.js");

Inheritance: FeaturesModel→Accessor

Since: ArcGIS Maps SDK for JavaScript 5.2

Provides reactive state and behavior for the Features (Next) and Popup components, including fetching and paging popup features, tracking selection, and coordinating highlighting and actions.

See also

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	FeaturesModelProperties

See the properties table for a list of all the properties that may be passed into the constructor.

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
active readonly	boolean
activeFeature	Graphic \| null \| undefined
aggregatedFeaturesEnabled	boolean
content	string \| HTMLElement \| null \| undefined
declaredClass readonly inherited	string	Accessor
defaultActions readonly	Collection<PopupAction>
defaultPopupTemplateEnabled	boolean
diagnostics readonly	FetchPopupFeaturesDiagnostics \| null \| undefined
effectiveHeading readonly	string \| null \| undefined
featureCount readonly	number
featureItemAbilities	FeatureAbilities \| null \| undefined
featurePage	number \| null \| undefined
features	Graphic[]
featuresPerPage	number
goToOverride inherited	GoToOverride \| null \| undefined	GoTo
heading	string \| null \| undefined
highlightEnabled	boolean
includeDefaultActions	boolean
initialDisplayMode	InitialDisplayOptions
location	Point \| null \| undefined
map	EsriMap \| null \| undefined
open	boolean
pendingLocation readonly	Point \| null \| undefined
selectedFeature readonly	Graphic \| null
selectedFeatureIndex	number
selectedFeatureItem readonly	FeatureModel
spatialReference	SpatialReference \| null \| undefined
state readonly	State
streamingFeatures readonly	boolean
timeZone	TimeZone
updateLocationEnabled	boolean
view	MapViewOrSceneView \| null \| undefined
waitingForContents readonly	boolean
waitingForResult readonly	boolean
zoomFactor	number

active

readonly Property

Type: boolean

Indicates if the features component is open and is not waiting for results.

See also

activeFeature

Property

Type: Graphic | null | undefined

The highlighted feature on the map that is either hovered over or in focus within the feature menu.

aggregatedFeaturesEnabled

Property

Type: boolean

Indicates if aggregated feature browsing is active in a cluster or bin. This value becomes true when the user enables feature browsing with the "Browse features" action button in the aggregate popup template. This should only be set programmatically when the selectedFeature is an aggregate graphic.

Default value: false

content

Property

Type: string | HTMLElement | null | undefined

The information to display. When this property is set, this content may only be static and cannot use fields to set content templates. To set a template for the content based on field or attribute names, see PopupTemplate.content.

See also

Sample - Intro to popup component

Example

// This sets generic instructions in the popup that will always be displayed
// unless it is overridden by a PopupTemplate.
features.content = "This is the content for the selected feature. It can be set to any string or HTML element.";

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

Since: ArcGIS Maps SDK for JavaScript 4.7

The name of the class. The declared class name is formatted as esri.folder.className.

defaultActions

readonly Property

Type: Collection<PopupAction>

The default actions for the selected feature, or the default zoom action when no feature is selected.

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 BuildingComponentSublayer, CatalogFootprintLayer, CSVLayer, FeatureLayer, GeoJSONLayer, ImageryLayer), ImageryTileLayer, KnowledgeGraphSublayer, OGCFeatureLayer, ParquetLayer, PointCloudLayer, SceneLayer, StreamLayer, Sublayer, SubtypeSublayer, VoxelLayer, WCSLayer, and WFSLayer.

Default value: false

diagnostics

readonly Property

Type: FetchPopupFeaturesDiagnostics | null | undefined

Diagnostics collected while fetching features from a view.

effectiveHeading

readonly Property

Type: string | null | undefined

The heading currently displayed for the selected feature item.

This value resolves to the selected feature item's heading when available, otherwise it falls back to heading.

See also

featureCount

readonly Property

Type: number

The number of selected features available.

Default value: 0

featureItemAbilities

autocast Property

Type: FeatureAbilities | null | undefined

Defines the specific FeatureAbilities that can be used when querying and displaying content.

featurePage

Property

Type: number | null | undefined

The number of feature batches prepared for browsing. Each batch contains up to featuresPerPage features. This value is null when there are no features.

Set this value to 1 to reset browsing, or increment it by one to prepare the next batch. Other assignments are ignored. Selecting a feature does not change this value; use selectedFeatureIndex to select any feature independently of browsing.

Default value: null

features

Property

Type: Graphic[]

An array of features. Each Graphic in this array must have a valid PopupTemplate set. They may share the same PopupTemplate or have unique PopupTemplates depending on their attributes. The content and heading properties are set based on the content and title properties of each graphic's respective PopupTemplate.

When more than one graphic exists in this array, the current content is set based on the value of the selected feature.

Example

// When setting the features property, the graphics pushed to this property
// must have a PopupTemplate set.
let g1 = new Graphic();
g1.popupTemplate = new PopupTemplate({
  title: "Results title",
  content: "Results: {ATTRIBUTE_NAME}"
});
let g2 = new Graphic();
g2.popupTemplate = new PopupTemplate({
  title: "Results title",
  content: "Results: {ATTRIBUTE_NAME}"
});
let g3 = new Graphic();
g3.popupTemplate = new PopupTemplate({
  title: "Results title",
  content: "Results: {ATTRIBUTE_NAME}"
});
let g4 = new Graphic();
g4.popupTemplate = new PopupTemplate({
  title: "Results title",
  content: "Results: {ATTRIBUTE_NAME}"
});
let g5 = new Graphic();
g5.popupTemplate = new PopupTemplate({
  title: "Results title",
  content: "Results: {ATTRIBUTE_NAME}"
});
// Create an array of graphics and set this to the features property. The content and heading ofvwill be set depending on the PopupTemplate of the graphics.
// Each graphic may share the same PopupTemplate or have a unique PopupTemplate.
let graphics = [g1, g2, g3, g4, g5];
featuresModel.features = graphics;

featuresPerPage

Property

Type: number

The number of features to fetch at one time.

Default value: 20

goToOverride

inherited Property

Type: GoToOverride | null | undefined

Inherited from: GoTo

Since: ArcGIS Maps SDK for JavaScript 4.8

This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.

See also

Example

// The following snippet uses Search but can be applied to any
// widgets that support the goToOverride property.
search.goToOverride = function(view, goToParams) {
  goToParams.options = {
    duration: updatedDuration
  };
  return view.goTo(goToParams.target, goToParams.options);
};

heading

Property

Type: string | null | undefined

The heading. This can be set to any string value no matter the features that are selected. If the selected feature has a PopupTemplate, then the title set in the corresponding template is used here.

Example

// This heading will display in the popup unless a selected feature's
// PopupTemplate overrides it.
featureComponent.heading = "Population by zip codes in Southern California";

highlightEnabled

Property

Type: boolean

Indicates whether to highlight the selected feature using one of the HighlightOptions defined in the view's View.highlights collection.

Default value: true

includeDefaultActions

Property

Type: boolean

Indicates whether or not to include defaultActions.

In order to disable any default actions, it is necessary to set includeDefaultActions to false.

Default value: true

Example

// Removes the default actions
featuresModel.includeDefaultActions = false;

initialDisplayMode

Property

Type: InitialDisplayOptions

Indicates whether to initially display a list of features, or the content for one feature. By default, a list is displayed when the associated view has focusRegionVisible enabled; otherwise, the content for one feature is displayed.

location

autocast Property

Type: Point | null | undefined

Geometry used to show the location of the feature. This is automatically set when selecting a feature. If displaying content not related to features in the map, such as the results from a task, then you must set this property before setting open to true.

See also

Intro to popup component

Examples

// Sets the location to the center of the view
featuresModel.location = viewElement.center;
featuresModel.open = true;

// Display the featuresModel when and where the user clicks the view.
reactiveUtils.on(()=>viewElement, "arcgisViewClick", ({ details: { mapPoint } })=>{
  featuresModel.location = mapPoint;
  featuresModel.open = true;
});

map

Property

Type: EsriMap | null | undefined

A map is required when the input features have 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.

Alternatively, the view property can be used to provide the map instance for this property.

See also

open

Property

Type: boolean

Indicates whether the component is open. This property is true when querying for results, even if it is not open. Use the active property to check if the component is open and is not waiting for results.

See also

Default value: false

pendingLocation

readonly Property

Type: Point | null | undefined

The location supplied when opening a feature stream while waiting for the first feature. This is null after the first feature arrives or the stream ends. Unlike location, it does not change the popup location while waiting.

selectedFeature

readonly Property

Type: Graphic | null

The selected feature accessed. The content is determined based on the PopupTemplate assigned to this feature.

selectedFeatureIndex

Property

Type: number

Index of the feature that is selected. When the features property is set, the first index (0) is automatically selected.

selectedFeatureItem

readonly Property

Type: FeatureModel

The selected FeatureModel item.

spatialReference

autocast Property

Type: SpatialReference | null | undefined

The spatial reference used for Arcade operations. This property should be set if Arcade expressions are executed that contain geometry functions.

Alternatively, the view property can be used to provide the spatial reference instance for this property.

See also

state

readonly Property

Type: State

The state.

Default value: "disabled"

streamingFeatures

readonly Property

Type: boolean

Indicates whether features are being streamed into the collection.

timeZone

autocast Property

Type: TimeZone

Dates and times will be displayed in this time zone. By default this time zone is inherited from the associated MapView or SceneView if the view property is set. When a view is not associated, then the property will fallback to the system time zone.

Possible Values

Value	Description
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.

updateLocationEnabled

Property

Type: boolean

Indicates whether to update the location when the selectedFeatureIndex changes.

Default value: false

view

Property

Type: MapViewOrSceneView | null | undefined

A reference to the MapView or SceneView.

A view is required if the user expects it to display content in any of the following situations:

The features have a popupTemplate containing Arcade expressions in ExpressionInfo or ExpressionContent that may use geometry functions or reference the $map profile variable (i.e. access data from layers within a map).
Content is displayed from the popup template of an aggregate feature (i.e. a cluster or bin).
Values from date and timestamp-offset fields should respect the associated MapView or SceneView.

waitingForContents

readonly Property

Type: boolean

Indicates whether content is being generated for any currently loaded feature models.

waitingForResult

readonly Property

Type: boolean

Indicates whether the current feature stream is waiting to yield its first feature. Previously displayed features remain available while this property is true. It becomes false when the current stream yields a feature or completes.

See also

active

zoomFactor

Property

Type: number

Number of levels of detail (LOD) to zoom in on the selected feature.

Default value: 4

Example

// Restricts the zooming to two LODS when the zoom in action is clicked.
featuresModel.zoomFactor = 2;

Methods

Method	Signature	Class
clear	clear(): void
emit inherited	emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean	EventedMixin
hasEventListener inherited	hasEventListener<Type extends EventNames<this>>(type: Type): boolean	EventedMixin
next	next(): void
on inherited	on<Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle	EventedMixin
previous	previous(): void
zoomTo	zoomTo(params: GoToParameters): Promise<void>

clear

Method

Signature: clear (): void

Removes the features, content, heading, location, and activeFeature.

Returns: void

emit

inherited Method

Signature: emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Since: ArcGIS Maps SDK for JavaScript 4.5

Emits an event on the instance. This method should only be used when creating subclasses of this class.

Parameters

Parameter	Type	Description	Required
type	Type	The name of the event.
event	this["@eventTypes"][Type]	The event payload.

Returns: boolean
true if a listener was notified

hasEventListener

inherited Method

Signature: hasEventListener <Type extends EventNames<this>>(type: Type): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Indicates whether there is an event listener on the instance that matches the provided event name.

Parameters

Parameter	Type	Description	Required
type	Type	The name of the event.

Returns: boolean
Returns true if the class supports the input event.

Method

Signature: next (): void

Selects the feature at the next index in relation to the selected feature.

See also

selectedFeatureIndex

Returns: void

on

inherited Method

Signature: on <Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Registers an event handler on the instance. Call this method to hook an event with a listener.

Parameters

Parameter	Type	Description	Required
type	Type	An event or an array of events to listen for.
listener	EventedCallback<this["@eventTypes"][Type]>	The function to call when the event fires.

Returns

ResourceHandle

Returns an event handler with a remove() method that should be called to stop listening for the event(s).

Property	Type	Description
remove	Function	When called, removes the listener from the event.

Example

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

Method

Signature: previous (): void

Selects the feature at the previous index in relation to the selected feature.

See also

selectedFeatureIndex

Returns: void

zoomTo

Method

Signature: zoomTo (params: GoToParameters): Promise<void>

Sets the view to a given target. If goToOverride is set, goToOverride() will be called with the current view and specified params. Otherwise, the view will be set using the provided params.

See also

MapView.goTo() or SceneView.goTo()

Parameters

Parameter	Type	Description	Required
params	GoToParameters	The parameters to pass to the `zoomTo()` method.

Returns: Promise<void>
A promise that resolves when the view's extent updates to the value defined in the GoToParameters.target.