RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/tutorials/display-a-pop-up/ below:

Display a pop-up | Overview | ArcGIS Maps SDK for JavaScript 4.33

Learn how to format a pop-up to show attributes in a feature layer.

A feature layer is a dataset in a hosted feature service. Each feature layer contains features with a single geometry type and a set of attributes. You can display attributes when users click on a feature by using a pop-up. Pop-ups can be configured to display raw attribute values, calculated values, or content in different ways including with charts or media.

In this tutorial, you will use a PopupTemplate to display feature attributes in different ways in a pop-up for three different hosted feature layers.

Note

To learn how to publish your own data as a hosted feature layer, visit Data services in the Mapping and location services guide.

Prerequisites ArcGIS Accounts:

You need an ArcGIS Location Platform or ArcGIS Online account.

Steps Create a new pen

To get started, either complete the Display a map tutorial or .

Get an access token

You need an access token with the correct privileges to access the location services used in this tutorial.

Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
  - Location services > Basemaps
- Item access
  - Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials access to the layer item. Learn more in Item access privileges.

In CodePen, set esriConfig.apiKey to your access token.

Use dark colors for code blocks

1
2
3
4
5
6
7
8
9
  var esriConfig = {
    apiKey: "YOUR_ACCESS_TOKEN",
  };

To learn about other ways to get an access token, go to Types of authentication.

Add modules

In a new <script> at the bottom of the <body>, use $arcgis.import() to add the FeatureLayer module.

The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK's different modules, visit the References page.

Expand

Use dark colors for code blocks

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
  <body>

    <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.027" zoom="13">
      <arcgis-zoom position="top-left"></arcgis-zoom>
    </arcgis-map>


    <script type="module">
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");



    </script>

Display attributes

The easiest way to display feature attributes is to reference the field names in the title or content area of a pop-up. Use a PopupTemplate class to define the content with attributes for the Trailheads feature layer.

Before you can progress further, you'll need to wait for the viewOnReady method to resolve to ensure the Map component is loaded and ready to use.

Expand

Use dark colors for code blocks

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
    <script type="module">
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


      const viewElement = document.querySelector("arcgis-map");
      await viewElement.viewOnReady();


    </script>

Create a popupTrailheads object and set the content property to a custom HTML string that will display information such as trail name and city jurisdiction.

Expand

Use dark colors for code blocks

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
    <script type="module">
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


      const viewElement = document.querySelector("arcgis-map");
      await viewElement.viewOnReady();


      // Define a pop-up for Trailheads
      const popupTrailheads = {
        title: "Trailhead",
        content:
          "<b>Trail:</b> {TRL_NAME}<br><b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft",
      };

    </script>

Create a trailheads FeatureLayer. Set the url, outFields, and popupTemplate properties before adding trailheads to the map. The FeatureLayer will autocast the popupTemplate to create a class instance of the object.

The outFields property enables access to attribute data on the client-side.

Expand

Use dark colors for code blocks

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
      // Define a pop-up for Trailheads
      const popupTrailheads = {
        title: "Trailhead",
        content:
          "<b>Trail:</b> {TRL_NAME}<br><b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft",
      };

      const trailheads = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0",
        outFields: ["TRL_NAME", "CITY_JUR", "X_STREET", "PARKING", "ELEV_FT"],
        popupTemplate: popupTrailheads,
      });

      viewElement.map.add(trailheads);

Click on the hiker icons to display the pop-up.

Display a chart

You can display different types of charts, also known as media content, in pop-ups. Charts are created by defining the type and fields (attributes) values. Use the PopupTemplate class to define a bar chart that shows the minimum and maximum elevation for the Trails feature layer.

Create a popupTrails object. In the content property, set the type to media that will display a column-chart of minimum and maximum elevations for each trail. Define the fieldInfos array at the popup template level to format the field names and values to display in the chart.

Expand

Use dark colors for code blocks

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
      viewElement.map.add(trailheads);

      // Define a popup for Trails
      const popupTrails = {
        title: "Trail Information",
        content: [
          {
            type: "media",
            mediaInfos: [
              {
                type: "column-chart",
                title: "Trail Elevation",
                value: {
                  fields: ["ELEV_MIN", "ELEV_MAX"],
                  normalizeField: null,
                  tooltipField: "Min and max elevation values",
                },
              },
            ],
          },
        ],
        fieldInfos: [
          { fieldName: "ELEV_MIN", label: "Elevation Minimum", digitSeparator: true },
          { fieldName: "ELEV_MAX", label: "Elevation Maximum", digitSeparator: true },
        ],
      };

Create a trails FeatureLayer. Set the url, outFields, and popupTemplate properties before adding trails to the map. The FeatureLayer will autocast the popupTemplate to create a class instance of the object.

Expand

Use dark colors for code blocks

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
      // Define a popup for Trails
      const popupTrails = {
        title: "Trail Information",
        content: [
          {
            type: "media",
            mediaInfos: [
              {
                type: "column-chart",
                title: "Trail Elevation",
                value: {
                  fields: ["ELEV_MIN", "ELEV_MAX"],
                  normalizeField: null,
                  tooltipField: "Min and max elevation values",
                },
              },
            ],
          },
        ],
        fieldInfos: [
          { fieldName: "ELEV_MIN", label: "Elevation Minimum", digitSeparator: true },
          { fieldName: "ELEV_MAX", label: "Elevation Maximum", digitSeparator: true },
        ],
      };

      const trails = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
        outFields: ["TRL_NAME", "ELEV_GAIN"],
        popupTemplate: popupTrails,
      });

      viewElement.map.add(trails, 0);

Click on the trails to view a pop-up that contains a bar chart with elevation data.

Display a table

Feature attributes can also be displayed in a table. Use the PopupTemplate and fieldInfos classes to display attribute names and values in a table for the Parks and Open Spaces feature layer. One of the advantages of using a table with fieldInfos is the ability to format field values in different ways, for example, to show currency or the number of decimal places.

Create a popupOpenspaces object. In the content property, set type to fields and define the fieldInfos array.

Expand

Use dark colors for code blocks

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
      viewElement.map.add(trails, 0);

      // Define popup for Parks and Open Spaces
      const popupOpenspaces = {
        title: "{PARK_NAME}",
        content: [
          {
            type: "fields",
            fieldInfos: [
              {
                fieldName: "AGNCY_NAME",
                label: "Agency",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box",
              },
              {
                fieldName: "TYPE",
                label: "Type",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box",
              },
              {
                fieldName: "ACCESS_TYP",
                label: "Access",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box",
              },

              {
                fieldName: "GIS_ACRES",
                label: "Acres",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: { places: 2, digitSeparator: true },

                stringFieldOption: "text-box",
              },
            ],
          },
        ],
      };

Create an openspaces FeatureLayer. Set the url, outFields, and popupTemplate properties before adding openspaces to the map. The FeatureLayer will autocast the popupTemplate to create a class instance of the object.

Expand

Use dark colors for code blocks

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
                stringFieldOption: "text-box",
              },
            ],
          },
        ],
      };

      const openspaces = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0",
        outFields: [
          "TYPE",
          "PARK_NAME",
          "AGNCY_NAME",
          "ACCESS_TYP",
          "GIS_ACRES",
          "TRLS_MI",
          "TOTAL_GOOD",
          "TOTAL_FAIR",
          "TOTAL_POOR",
        ],
        popupTemplate: popupOpenspaces,
      });

      viewElement.map.add(openspaces, 0);

Run the App

In CodePen, run your code to display the map.

Click on different park areas to display a pop-up of a table view with the fields and values you specified. You should be able to click all of the features in the map and view a pop-up. Each pop-up will display feature attributes in a unique way.

What's next?

Learn how to use additional API features and ArcGIS services in these tutorials:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4