This sample shows how to utilize the Features component to allow the exploration of a feature's PopupTemplate content outside of the map. The Features component should be used if Popup functionality is needed outside of the map.
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
Add a Features component to a Calcite Design System shell and reference the map component which contains the webmap with National Park data.
<arcgis-features class="calcite-match-height" reference-element="#parks-map" ></arcgis-features>Add a custom action to the action bar under the title of the selected feature that opens a specified web page.
// Add a custom action to the actions menu.
featuresComponent.actions = [
{
type: "button",
title: "Visitor Use Statistics",
id: "more-info",
icon: "information-letter"
}
];
Use an arcgis event listener to watch for a click event on the map component and call the open() method to display the component with features at the clicked location.
// Add an event listener to the map to open the Features component when the user clicks on the map.
map.addEventListener("arcgisViewClick", (event) => {
const { mapPoint } = event.detail;
featuresComponent.open({
location: mapPoint,
fetchFeatures: true
});
});