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 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:.
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:Topographic" ;
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 IconTrailheads feature layer, reference the hiker icon URL.
Create a new Iconicon.
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 FeatureMarker
Add a Featureurl 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 Markerpointicon
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 stylePath
Create a new Panecreate
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 Featuretrails 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
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_ property. The weightwidth 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
Create a new Panecreate
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 getstyle.z.
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 Featureurl to the to the Trails URL and the pane to bike.
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 styleParks and Open Space feature layer with different colors based on the type of land they represent.
Add a Featureurl 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 stylefill 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:
