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 Popup Template
to display feature attributes in different ways in a pop-up for three different hosted feature layers .
Prerequisites You need an ArcGIS Developer or ArcGIS Online account to access the dashboard and create an API key .
Steps Create a new pen To get started, either complete the Display a map tutorial or use this pen . Set the API key To access ArcGIS services , you need an API key .
Go to your dashboard to get an API key .
In CodePen , set the api Key
to your key, so it can be used to access basemap layer and location services.
Use dark colors for code blocks
Change line
1
2
3
4
esriConfig.apiKey = "YOUR_API_KEY" ;
const map = new Map ({
basemap : "arcgis-topographic" // Basemap layer service
});
Add modules In the require
statement, add the Feature Layer
module.
More info The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules , but this tutorial is based on AMD. The AMD require
function uses references to determine which modules will be loaded – for example, you can specify "esri/Map"
for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. Map
) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. For more information on the different types of modules, visit the Introduction to Tooling guide topic.
Expand
Use dark colors for code blocks
Add line. Add line. Change line
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
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer"
],
function ( esriConfig, Map , MapView, FeatureLayer ) {
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 Popup Template
class to define the content with attributes for the Trailheads feature layer .
Create a popup Trailheads
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
Add line. Add line. Add line. Add line. Add line.
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
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.80543 , 34.02700 ], //Longitude, latitude
zoom : 13
});
// 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"
}
Create a trailheads
Feature Layer
. Set the url
, out Fields
, and popup Template
properties before adding trailheads
to the map
. The Feature Layer
will autocast the popup Template
to create a class instance of the object.
More info The out Fields
property enables access to attribute data on the client-side.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
// 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
});
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 Popup Template
class to define a bar chart that shows the minimum and maximum elevation for the Trails feature layer .
Create a popup Trails
object. In the content
property, set the type
to media
that will display a column-chart
of minimum and maximum elevations for each trail.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
map.add(trailheads);
// Define a popup for Trails
const popupTrails = {
title : "Trail Information" ,
content : [{
type : "media" ,
mediaInfos : [{
type : "column-chart" ,
caption : "" ,
value : {
fields : [ "ELEV_MIN" , "ELEV_MAX" ],
normalizeField : null ,
tooltipField : "Min and max elevation values"
}
}]
}]
}
Create a trails
Feature Layer
. Set the url
, out Fields
, and popup Template
properties before adding trails
to the map
. The Feature Layer
will autocast the popup Template
to create a class instance of the object.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
// Define a popup for Trails
const popupTrails = {
title : "Trail Information" ,
content : [{
type : "media" ,
mediaInfos : [{
type : "column-chart" ,
caption : "" ,
value : {
fields : [ "ELEV_MIN" , "ELEV_MAX" ],
normalizeField : null ,
tooltipField : "Min and max elevation values"
}
}]
}]
}
const trails = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0" ,
outFields : [ "TRL_NAME" , "ELEV_GAIN" ],
popupTemplate : popupTrails
});
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 Popup Template
and field Infos
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 field Infos
is the ability to format field values in different ways, for example, to show currency or the number of decimal places.
Create a popup Openspaces
object. In the content
property, set type
to fields
and define the field Infos
array.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
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
Feature Layer
. Set the url
, out Fields
, and popup Template
properties before adding openspaces
to the map
. The Feature Layer
will autocast the popup Template
to create a class instance of the object.
Expand
Use dark colors for code blocks
Add line. Add line. Add line. Add line. Add line. Add line. Add line.
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
"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
});
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: