The Popup widget may contain one or more actions, or buttons, that allow users to execute a function when clicked. The default popup on the view contains an "Zoom in" action that is symbolized by a magnifying glass icon
. When clicked, the view zooms in four LODs for points or to the extent of the feature for non-points, and centers on the selected feature.
This sample demonstrates how to add custom actions to a Popup and a PopupTemplate. Actions are added via the actions property on either Popup or PopupTemplate. Actions are added to the popup in the order they are added to the actions array.
Actions are styled by either using the icon
, class
, or image
property. If using class
, you must use an icon font. If using image
, you must provide a valid URL to an image that will be used as a background-image for the action. This sample uses the icon
property to style the action.
// Create a custom action that measures the length of a line feature.
const measureThisAction = {
title: "Measure Length",
id: "measure-this",
icon: "measure"
};
// Create a FeatureLayer with a popupTemplate and custom action.
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
popupTemplate: {
title: "Trail run",
content: "{name}",
// ADD the custom action to the popupTemplate.
actions: [measureThisAction]
}
});
//Add the feature layer to the map.
arcgisMap.addLayer(featureLayer);
// Event handler that fires each time an action is clicked.
reactiveUtils.on(
() => arcgisMap.popup,
"trigger-action",
(event) => {
// Execute the measureThis() function if the measure-this action is clicked.
if (event.action.id === "measure-this") {
measureThis();
}
}
);
// Execute each time the "Measure Length" is clicked.
async function measureThis() {
const geom = arcgisMap.popup.selectedFeature.geometry;
// Load the geodeticLengthOperator and calculate the feature's geometry in miles.
if (!geodeticLengthOperator.isLoaded()) {
await geodeticLengthOperator.load();
}
const initDistance = geodeticLengthOperator.execute(geom, {
unit: "miles"
});
const distance = initDistance.toFixed(2);
// Update the popup content to display the distance.
arcgisMap.popup.content =
arcgisMap.popup.selectedFeature.attributes.name +
"<div style='background-color:DarkGray;color:white'>Distance: " +
distance +
" miles</div>";
}