Popup actions

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 zoom-action . 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, className, or image property. If using className, 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.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
          // 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>";
          }

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close