Features

Collection of action or action toggle objects displayed in the action bar. Each action may be executed by clicking the icon or image symbolizing them. By default, every component has a Zoom To action styled with a magnifying glass icon. When this icon is clicked, the map zooms in four LODs and centers on the selected feature. This default action can be removed by setting includeDefaultActionsDisabled to true, or by setting the overwriteActions property to true in the PopupTemplate. The order of each action is the order in which they appear in the actions Collection. The arcgisTriggerAction event fires each time an action is clicked. Actions are defined with the properties listed in the ActionButton or ActionToggle class.

See also

• arcgisTriggerAction

Example

1
2
3
4
5
6
7
8
9
10
11
12
// Defines an action button to zoom out from the selected feature
const zoomOutAction = {
  type: "button",
  // This text is displayed as a tooltip
  title: "Zoom out",
  // The ID by which to reference the action in the event handler
  id: "zoom-out",
  // Sets the icon used to style the action button
  icon: "magnifying-glass-minus"
};
// Adds the custom action to the Features component's actions collection.
featuresComponent.actions.push(zoomOutAction);

Indicates if the component is active when it is visible and is not waiting for results.

Default value

false

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

Indicates whether a component is closed. When true, the component will be hidden.

Attribute

closed

Default value

false

Indicates whether the component displays its content. If true, only the header displays. This property is only honored if showCollapsed is true.

Attribute

collapsed

Default value

false

The content of the Features component. When set directly on the component, this content is 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.

Example

1
2
3
// This sets generic instructions in the component that will always be displayed
// unless it is overridden by a PopupTemplate.
featuresComponent.content = "Click a feature on the map to view its attributes";

Attribute

content

Enables automatic creation of a popup template for layers that have popups enabled but no popupTemplate defined.

Read more...

Attribute

default-popup-template-enabled

Default value

false

The number of selected features available to the popup.

Default value

0

This property enables multiple features in the component to display in a list rather than displaying the first selected feature. Setting this to true allows the user to scroll through the list of features. This value will only be honored if initialDisplayMode is set to "feature".

Attribute

feature-menu-open

Default value

false

Sets the title to display on the component while viewing the feature menu.

Attribute

feature-menu-title

Indicates whether the feature navigation arrows are displayed at the top of the component. By default, the navigation arrows are displayed at the bottom of the component.

Attribute

feature-navigation-top

Default value

false

An array of features associated with the Features component. 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 of the component is 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 of the component is set based on the value of the selected feature.

This value is null if no features are associated with the component.

Example

1
2
3
4
5
6
7
8
9
10
11
12
// 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}"
});
// Set the graphics as an array to the Features component instance. The content and title of
// the component will 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];
featuresComponent.features = graphics;

The number of features to fetch at one time.

Attribute

features-per-page

Default value

20

The title of the Features component.

Attribute

features-title

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

This function provides the ability to override either the arcgis-map.goTo or arcgis-scene.goTo methods.

Example

1
2
3
4
5
6
features.goToOverride = (map, goToParams)=>  {
  goToParams.options = {
    duration: updatedDuration
  };
  return map.goTo(goToParams.target, goToParams.options);
};

The actions that are displayed in the header of the component.

The title of the Features component. 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.

See also

• headingLevel

Example

1
2
3
// This title will display in the component unless a selected feature's
// PopupTemplate overrides it.
featuresComponent.title = "Population by zip codes in Southern California";

Attribute

heading

Indicates the heading level to use for the heading of the component. By default, the heading is rendered as a level 2 heading (e.g. <h2>Popup title</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.

Attribute

heading-level

Default value

2

Indicates whether to hide the action bar that holds the feature's actions.

Attribute

hide-action-bar

Default value

false

Indicates whether to hide the close button in the component.

Attribute

hide-close-button

Default value

false

Indicates whether to hide the group heading for a list of multiple features.

Attribute

hide-feature-list-layer-title

Default value

false

Indicates whether to hide the feature menu heading and description in the component's feature menu list.

Attribute

hide-feature-menu-heading

Default value

false

Indicates whether to hide the feature pagination in the component. This allows the user to scroll through various selected features using pagination arrows.

Attribute

hide-feature-navigation

Default value

false

Determines whether the component should be shown within its built-in flow component or if the flow component should be excluded. The component will be displayed within its original flow component if set to false. The flow component will be omitted from the component if set to true. To place the component into an existing Calcite flow component, set this property to false.

Attribute

hide-flow

Default value

false

Indicates whether to hide the component's heading.

Attribute

hide-heading

Default value

false

Indicates whether to hide the component's loading spinner.

Attribute

hide-spinner

Default value

false

Indicates whether to highlight the selected feature in the associated arcgis-map or arcgis-scene component.

Attribute

highlight-disabled

Default value

false

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

Indicates whether to include the default actions in the component. In order to disable any default actions, it is necessary to set includeDefaultActionsDisabled to true.

Attribute

include-default-actions-disabled

Default value

false

Indicates whether to initially display a list of features, or the content for one feature.

Attribute

initial-display-mode

Default value

"feature"

The component's default label.

Attribute

label

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

• Type system
• Arcade Profiles: Popup

Example

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

Default value

null

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

Attribute

position

An array of pending Promises that have not yet been fulfilled. If there are no pending promises, the value is null. When the pending promises are resolved they are removed from this array and the features they return are pushed into the features array.

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

The feature that the component has drilled into. This feature is either associated with the selected feature in a relationship or utility network element.

The selected feature accessed by the Features component. The content displayed in the component is determined based on the PopupTemplate assigned to this feature.

Returns a reference to the current arcgis-feature component. This is useful if needing to get a reference to the Feature component in order to make any changes to it.

Index of the feature that is selected. When features are set, the first index is automatically selected.

Attribute

selected-feature-index

Indicates whether to show the collapse button in the component.

Attribute

show-collapse-button

Default value

false

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

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

See also

• Type system
• Arcade Profiles: Popup

Default value

null

The current state of the component.

Attribute

state

Default value

"disabled"

Dates and times displayed in the component will be displayed in this time zone. By default this time zone is inherited from arcgis-map.timeZone if the view property is set. 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

A reference to the MapView or SceneView. The Features component requires a view to be set if:

• 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). Alternatively, set the map property.
• 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 view's time zone. Alternatively, set the timeZone property.
• Using the fetchFeatures method or the fetchFeatures option in the open method.
• Using the Zoom to default action. If the view is not specified, set the includeDefaultActionsDisabled property to true to remove this default action.

Indicates whether the popup is visible. This property is true when the popup is querying for results, even if it is not open in the view. Use the property to check if the component is visible.

Attribute

visible

Default value

false

Removes promises, features, content, and heading from the Features component.

Returns

Promise<void>

A convenience method to close the component.

Returns

Promise<void>

Create a promise that resolves once component is fully loaded.

Example

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

Returns

Promise<void>

Permanently destroy the component.

Returns

Promise<void>

Use this method to return feature(s) at a given screen location. These features are fetched from all of the layer in the view. In order to use this, a layer must already have an associated PopupTemplate. This method allows a developer to control how the input location is handled.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Use reactiveUtils to watch the map's click event.
reactiveUtils.on(() => map, "arcgisViewClick",
(event) => {
  // Call fetchFeatures and pass in the click event screenPoint
  featuresComponent.fetchFeatures(event.screenPoint).then((response) => {
    // Access the response from fetchFeatures
    response.allGraphicsPromise.then((graphics) => {
    // If there are no graphics in the click event, then make sure
    // the Features component is not showing.
      if(graphics.length === 0){
        featuresComponent.visible = false;
      }
      // If graphics do exist, set the Features component features property to the returned
      // graphics from fetchFeatures.
      else{
        featuresComponent.features = graphics;
      }
    });
  });

Parameters

Returns

Promise<FetchPopupFeaturesResult>

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

See also

• selectedFeatureIndex

Returns

Promise<FeaturesViewModel>

Opens the Features component with content defined either explicitly with content or driven from the PopupTemplate of input features.

Examples

1
2
3
4
5
6
7
8
9
// Use reactiveUtils to watch the map component's click event.
reactiveUtils.on(() => viewElement, "arcgisViewClick", (event) => {
  const { mapPoint } = event.detail;
  featuresComponent.open({
    // Title and content displayed in the component
    title: `Click location: (${mapPoint.x},${mapPoint.y})`,
    content: "This is the default content displayed on click."
  });
});

1
2
3
4
5
6
7
8
9
10
11
// The Features component must have a reference element set on the component along with the
// location property to fetch features.
// Use reactiveUtils to watch the map component's click event.
reactiveUtils.on(() => viewElement, "arcgisViewClick", (event) => {
  const { mapPoint } = event.detail;
  featuresComponent.open({
    location: mapPoint,
    // Display the content for the selected feature(s) if a popupTemplate is defined.
    fetchFeatures: true
  });
});

1
2
3
4
5
6
7
8
// Open the Features component with a specified array of graphics that already
// have a PopupTemplate set and display the feature menu when it opens.
featuresComponent.open({
  // array of graphics
  features: graphics,
  // selected features initially display in a list
  featureMenuOpen: true
});

Parameters

Returns

Promise<void>

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

See also

• selectedFeatureIndex

Returns

Promise<FeaturesViewModel>

Use this method to give focus to the Component if the component is able to be focused.

Returns

Promise<void>

Triggers the arcgisTriggerAction event and executes the action at the specified index in the actions array.

Parameters

Returns

Promise<void>

Emitted when the component's close button is clicked.

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

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

Fires after the user clicks on an action in the Features component. This event may be used to define a custom function to execute when particular actions are clicked.

See also

• actions
• PopupTemplate.actions
• Features.open()

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
viewElement.addEventListener("arcgisViewClick", (event) => {
  const { mapPoint } = event.detail;
  featuresComponent.open({
    location: mapPoint,
    fetchFeatures: true,
    actions: [{
      // This text is displayed as a tooltip
      title: "Zoom out",
      // The ID used to reference this action in the event handler
      id: "zoom-out",
      // Sets the icon font used to style the action button
      icon: "magnifying-glass-minus"
    },
    {
      title: "Delete Feature",
      id: "delete-feature-action",
      icon: "trash"
    }]
  });
});

// Fires each time an action is clicked
reactiveUtils.on(()=> featuresComponent, "arcgisTriggerAction", (event)=>{
  // If the zoom-out action is clicked, execute the following code
  if(event.detail.action.id === "zoom-out"){
    // Zoom out two levels (LODs)
    viewElement.goTo({
      center: viewElement.center,
      zoom: viewElement.zoom - 2
    });
  }
});