This sample shows how to utilize the Features widget to allow the exploration of a feature's PopupTemplate content outside of the View. The Features widget should be used if needing to use the Popup functionality outside of the view.
The data used in this sample is from the National Park Service showing National Park boundaries alongside trails within each park. The popup content was preconfigured in an ArcGIS Online webmap and contains an Arcade element that returns text, a media element with charts, and a relationship element to display the related trails within each park.
How it works
Create a new instance of the Features widget and set its container to a div HTML element that resides in a
Calcite Design System shell panel.
Add a custom action that opens a web page to the FeaturesViewModel.actions property to display in the action bar under the title of the selected feature.
// Create a new instance of the Features widget and set
// it's container to a div residing in a shell panel.
const featuresWidget = new Features({
container: "features-widget",
viewModel: {
// Add a custom action to the widget that will open a
// website when it's selected.
actions: [
{
type: "button",
title: "Visitation Highlights (2022)",
id: "more-info",
icon: "information-letter"
}
],
view: view
}
});
Use reactiveUtils.on() to watch for the view click event and call Features.open() to display the widget with features residing in the click location.
// Open the Features widget with features fetched from
// the view click event location.
reactiveUtils.on(
() => view,
"click",
(event) => {
featuresWidget.open({
location: event.mapPoint,
fetchFeatures: true
});
}
);