Learn how to use renderers to apply data-driven styling to feature layers .
A feature layer is a dataset in a hosted feature service . Each feature layer contains features with a single geometry type (point, line, or polygon), and a set of attributes . Feature layers can be styled on the client-side with a renderer . Renderers are responsible for using attribute values to apply the appropriate symbol to each feature when the layer is drawn. Renderers can be used with visual variables and expressions to create more complex, data-driven visualizations.
In this tutorial, you use three different renderers to style three hosted feature layers .
Prerequisites You need a free ArcGIS developer account to access your dashboard and API keys . The API key must be scoped to access the services used in this tutorial.
Steps Create a new pen To get started, either complete the Display a map tutorial or use this pen . Set an 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. 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer"
], function ( esriConfig, Map , MapView, FeatureLayer ) {
Style trailheads (points) Use the Simple Renderer
, Picture Marker Symbol
, and Label Class
classes to style the points with an image, and then define label attributes to display for the Trailheads feature layer .
Create a trailheads Renderer
and define it as a simple
renderer. Set the symbol
property to draw a hiker image accessed from its url
.
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.
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
167
168
169
170
171
172
173
174
175
176
177
178
const view = new MapView({
container : "viewDiv" ,
map : map,
center : [- 118.80543 , 34.02700 ], //Longitude, latitude
zoom : 13
});
const trailheadsRenderer = {
"type" : "simple" ,
"symbol" : {
"type" : "picture-marker" ,
"url" : "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png" ,
"width" : "18px" ,
"height" : "18px"
}
}
Create a trailheads Labels
and set the symbol
property to draw a label with the TRL_ NAME
.
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.
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
167
168
169
170
171
172
173
174
175
176
177
178
const trailheadsRenderer = {
"type" : "simple" ,
"symbol" : {
"type" : "picture-marker" ,
"url" : "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png" ,
"width" : "18px" ,
"height" : "18px"
}
}
const trailheadsLabels = {
symbol : {
type : "text" ,
color : "#FFFFFF" ,
haloColor : "#5E8D74" ,
haloSize : "2px" ,
font : {
size : "12px" ,
family : "Noto Sans" ,
style : "italic" ,
weight : "normal"
}
},
labelPlacement : "above-center" ,
labelExpressionInfo : {
expression : "$feature.TRL_NAME"
}
};
Create a trailheads
Feature Layer
. Set the url
property to access its URL endpoint. Set the renderer
and labeling Info
before adding trailheads
to the map
. The feature layer will autocast the renderer
and labeling Info
to create class instances of the objects.
Expand
Use dark colors for code blocks
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
labelPlacement : "above-center" ,
labelExpressionInfo : {
expression : "$feature.TRL_NAME"
}
};
// Create the layer and set the renderer
const trailheads = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0" ,
renderer : trailheadsRenderer,
labelingInfo : [trailheadsLabels]
});
map.add(trailheads);
View hiker symbols with trailhead names.
Style trails (lines) Use the Simple Renderer
and Visual Variable
classes to style trails in the Trails feature layer . Visual variables define the attribute to use to style trails with a greater elevation gain wider compared to trails with smaller elevation changes. This is one form of data-driven visualization.
Create a trails Renderer
and define it as a simple
renderer.
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.
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
167
168
169
170
171
172
173
174
175
176
177
178
map.add(trailheads);
// Define a unique value renderer and symbols
const trailsRenderer = {
type : "simple" ,
symbol : {
color : "#BA55D3" ,
type : "simple-line" ,
style : "solid"
},
In the visual Variables
array, set the field
to ELEV_ GAIN
to determine line width.
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.
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
167
168
169
170
171
172
173
174
175
176
177
178
// Define a unique value renderer and symbols
const trailsRenderer = {
type : "simple" ,
symbol : {
color : "#BA55D3" ,
type : "simple-line" ,
style : "solid"
},
visualVariables : [
{
type : "size" ,
field : "ELEV_GAIN" ,
minDataValue : 0 ,
maxDataValue : 2300 ,
minSize : "3px" ,
maxSize : "7px"
}
]
};
Create a trails
Feature Layer
. Set the url
to access its URL endpoint. Set the renderer
and opacity
properties before adding trails
to the map
. The feature layer will autocast the renderer
a create class instances of the object.
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.
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
167
168
169
170
171
172
173
174
175
176
177
178
visualVariables : [
{
type : "size" ,
field : "ELEV_GAIN" ,
minDataValue : 0 ,
maxDataValue : 2300 ,
minSize : "3px" ,
maxSize : "7px"
}
]
};
// Create the layer and set the renderer
const trails = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" ,
renderer : trailsRenderer,
opacity : .75
});
// Add the layer
map.add(trails, 0 );
View trails of differing widths based on elevation gain.
Show bike-only trails (lines) You can use a renderer and definition expression to style a subset of data from a feature layer . To style bike-only trails from the Trails feature layer, use the definite Expression
, Simple Renderer
and Simple Line Symbol
classes. The layer is added on top of the existing trails layer.
Create a bike Trails Renderer
and define it as a simple
renderer. Set the symbol
to draw a line that is styled with dots in pink.
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.
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
167
168
169
170
171
172
173
174
175
176
177
178
// Add the layer
map.add(trails, 0 );
// Add bikes only trails
const bikeTrailsRenderer = {
type : "simple" ,
symbol : {
type : "simple-line" ,
style : "short-dot" ,
color : "#FF91FF" ,
width : "1px"
}
};
Create a bike Trails
Feature Layer
and set the url
and renderer
properties. Set the definite Expression
(a SQL where clause) to access bike trails from the Trails feature layer before adding bike Trails
to the map
. The feature layer will autocast the renderer
a create class instances of the object
Expand
Use dark colors for code blocks
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
// Add bikes only trails
const bikeTrailsRenderer = {
type : "simple" ,
symbol : {
type : "simple-line" ,
style : "short-dot" ,
color : "#FF91FF" ,
width : "1px"
}
};
const bikeTrails = new FeatureLayer({
url :
"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" ,
renderer : bikeTrailsRenderer,
definitionExpression : "USE_BIKE = 'YES'"
});
map.add(bikeTrails, 1 );
View the location of bike trails in relation to other trails.
Style open spaces (polygons) You can use renderers to style feature layer data by unique attribute values. Use the Unique Value Renderer
and Simple Fill Symbol
classes to style polygon features with different fill colors, based on the TYPE attribute in the Parks and Open Spaces feature layer .
Create a create Fill Symbol
function with value
and color
as parameters. The function will return a solid
, simple-fill
symbol for each park type.
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
map.add(bikeTrails, 1 );
// Add parks with a class breaks renderer and unique symbols
function createFillSymbol ( value, color ) {
return {
"value" : value,
"symbol" : {
"color" : color,
"type" : "simple-fill" ,
"style" : "solid" ,
"outline" : {
"style" : "none"
}
},
"label" : value
};
}
Create an open Spaces Renderer
and define it as unique-value
. Set the field
property to TYPE
. In the unique Value Infos
array, set unique colors for each park type.
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.
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
167
168
169
170
171
172
173
174
175
176
177
178
// Add parks with a class breaks renderer and unique symbols
function createFillSymbol ( value, color ) {
return {
"value" : value,
"symbol" : {
"color" : color,
"type" : "simple-fill" ,
"style" : "solid" ,
"outline" : {
"style" : "none"
}
},
"label" : value
};
}
const openSpacesRenderer = {
type : "unique-value" ,
field : "TYPE" ,
uniqueValueInfos : [
createFillSymbol( "Natural Areas" , "#9E559C" ),
createFillSymbol( "Regional Open Space" , "#A7C636" ),
createFillSymbol( "Local Park" , "#149ECE" ),
createFillSymbol( "Regional Recreation Park" , "#ED5151" )
]
};
Create an openspaces
Feature Layer
. Set the url
to access its URL endpoint. Set the renderer
and opacity
properties before adding openspaces
to the map
. The feature layer will autocast the renderer
a create class instances of the object
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.
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
167
168
169
170
171
172
173
174
175
176
177
178
const openSpacesRenderer = {
type : "unique-value" ,
field : "TYPE" ,
uniqueValueInfos : [
createFillSymbol( "Natural Areas" , "#9E559C" ),
createFillSymbol( "Regional Open Space" , "#A7C636" ),
createFillSymbol( "Local Park" , "#149ECE" ),
createFillSymbol( "Regional Recreation Park" , "#ED5151" )
]
};
// Create the layer and set the renderer
const openspaces = new FeatureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0" ,
renderer : openSpacesRenderer,
opacity : 0.2
});
// Add the layer
map.add(openspaces, 0 );
Run the app In CodePen , run your code to display the map.
The completed map should display all of the layers with a unique, data-driven style.
What's next? Learn how to use additional API features and
ArcGIS services in these tutorials: