Learn how to use data-driven styling to apply symbol colors and styles to feature layers .
A feature layer is a dataset in a feature service hosted in ArcGIS . Each feature layer contains features with a single geometry type (point, line, or polygon), and a set of attributes .
In this tutorial, you apply different styles to enhance the visualization of the Trailheads , Trails , and Parks and Open Spaces feature layers.
Prerequisites You need an ArcGIS Developer or ArcGIS Online account to access the developer 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 location services , you need an API key or OAuth 2.0 access token . To learn how to create and scope your key, visit the Create an API key tutorial.
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.
In CodePen , update api Key
to use your key.
Use dark colors for code blocks
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
const map = L.map( "map" , {
minZoom : 2
})
map.setView([ 34.02 , - 118.805 ], 13 );
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "arcgis/streets" ;
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
Update the basemap A topographic basemap layer is typically used when displaying hiking trails.
Update the basemap layer to use arcgis/outdoor
.
Expand
Use dark colors for code blocks
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
const map = L.map( "map" , {
minZoom : 2
}).setView([ 34.02 , - 118.805 ], 13 );
const apiKey = "YOUR_API_KEY" ;
const basemapEnum = "arcgis/outdoor" ;
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
Load a hiker icon To use an image as an icon for point features, you use the Icon
class. To style the trailheads from the Trailheads feature layer, reference the hiker icon URL.
Create a new Icon
that references the hiker icon URL and specify the icon Size
.
Expand
Use dark colors for code blocks
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
L.esri.Vector.vectorBasemapLayer(basemapEnum, {
apiKey : apiKey
}).addTo(map);
const hikerIcon = L.icon({
iconUrl : "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png" ,
iconSize : [ 18 , 18 ]
});
Style trailheads (points) Use the Feature Layer
and Marker
classes to style and display trailheads.
Add a Feature Layer
. Set the url
property to the Trailheads URL .
Expand
Use dark colors for code blocks
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
const hikerIcon = L.icon({
iconUrl : "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png" ,
iconSize : [ 18 , 18 ]
});
const trailheads = L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0" ,
})
.addTo(map);
Create a custom Marker
at each trailhead location with point To Layer
. Set the marker's icon
property to the hiker icon.
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
152
153
154
155
156
const hikerIcon = L.icon({
iconUrl : "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png" ,
iconSize : [ 18 , 18 ]
});
const trailheads = L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0" ,
pointToLayer : ( geojson, latlng ) => {
return L.marker(latlng, {
icon : hikerIcon
});
}
})
.addTo(map);
Run the application to view hiker icons at the location of each trailhead.
Style trails (lines) by elevation gain To visualize the elevation gain of a trail in the Trails (lines) feature layer , add a style
definition that defines Path
options.
Create a new Pane
in the map by calling the create Pane
method.
Expand
Use dark colors for code blocks
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
const trailheads = L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0" ,
pointToLayer : ( geojson, latlng ) => {
return L.marker(latlng, {
icon : hikerIcon
});
}
})
.addTo(map);
map.createPane( "trails" );
Add a Feature Layer
to the trails
pane. Set the url
property to the Trails URL .
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
152
153
154
155
156
map.createPane( "trails" );
L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" ,
pane : "trails" ,
})
.addTo(map);
Define a style
function to render the line features in magenta.
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
152
153
154
155
156
map.createPane( "trails" );
L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" ,
pane : "trails" ,
style : ( feature ) => {
return {
color : "#BA55D3" ,
};
}
})
.addTo(map);
Set the width
of each trail feature dynamically based on its ELEV_ GAIN
property. The weight
of the feature is determined by the width
of the trail.
Expand
Use dark colors for code blocks
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
map.createPane( "trails" );
L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" ,
pane : "trails" ,
style : ( feature ) => {
const width = 3 + ( 4 * feature.properties.ELEV_GAIN) / 2300 ;
return {
color : "#BA55D3" ,
weight : width
};
}
})
.addTo(map);
Run the app to view trails of differening widths based on elevation gain.
Display bike-friendly trails You can style and display certain features, such as bike-friendly trails, by constructing a SQL query and a style
definition in a new pane.
Create a new Pane
in your map by calling the create Pane
method.
More info Panes control the order in which layers render to the map. To change the ordering of a layer, get the pane containing the layer with get Pane
and set the pane's style.z Index
.
Expand
Use dark colors for code blocks
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
L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" ,
pane : "trails" ,
style : ( feature ) => {
const width = 3 + ( 4 * feature.properties.ELEV_GAIN) / 2300 ;
return {
color : "#BA55D3" ,
weight : width
};
}
})
.addTo(map);
map.createPane( "bikeTrails" );
Create a Feature Layer
. Set the url
to the to the Trails URL and the pane
to bike Trails
.
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
152
153
154
155
156
map.createPane( "bikeTrails" );
L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" ,
pane : "bikeTrails" ,
})
.addTo(map);
Set the where
SQL clause to return the features that are bike-friendly.
Expand
Use dark colors for code blocks
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
map.createPane( "bikeTrails" );
L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" ,
pane : "bikeTrails" ,
where : "USE_BIKE = 'YES'" ,
})
.addTo(map);
Set the style
to render the trails as dashed white lines.
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
map.createPane( "bikeTrails" );
L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" ,
pane : "bikeTrails" ,
where : "USE_BIKE = 'YES'" ,
style : () => {
return {
color : "#FFFFFF" ,
dashArray : "2, 3" ,
dashOffset : "2" ,
weight : "1.5"
};
}
})
.addTo(map);
Run the app to view the locations of bike-friendly trails in relation to other hiking trails.
Style park areas (polygons) You can define different style options for each unique attribute value. Add a style
definition to render the polygon features from the Parks and Open Space feature layer with different colors based on the type of land they represent.
Add a Feature Layer
. Set the url
property to the Parks and Open Space URL .
Expand
Use dark colors for code blocks
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
L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0" ,
pane : "bikeTrails" ,
where : "USE_BIKE = 'YES'" ,
style : () => {
return {
color : "#FFFFFF" ,
dashArray : "2, 3" ,
dashOffset : "2" ,
weight : "1.5"
};
}
})
.addTo(map);
L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0" ,
})
.addTo(map);
Add a style
that renders a different fill Color
for each unique value of the TYPE
field.
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
L.esri
.featureLayer({
url : "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0" ,
style : ( feature ) => {
let style = {
color : null // no outline color
};
if (feature.properties.TYPE === "Natural Areas" ) {
style.fillColor = "#9E559C" ;
} else if (feature.properties.TYPE === "Regional Open Space" ) {
style.fillColor = "#A7C636" ;
} else if (feature.properties.TYPE === "Local Park" ) {
style.fillColor = "#149ECE" ;
} else {
style.fillColor = "#ED5151" ;
}
return style;
}
})
.addTo(map);
Run the app to view different park areas in different colors according to their type.
Run the app In CodePen , run your code to display the map.
You should now see the styled trailheads, trails, and parks layers.
What's next? Learn how to use additional ArcGIS location services in these tutorials: