This sample demonstrates how to sort a layer's features using a field value. Feature sorting is configured on the orderBy property of the FeatureLayer.
Configure feature sort order
Use dark colors for code blocks Copy
49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 49 50 51 52 53 54 55 56 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57 57
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
// Sort features by average traffic count
// large symbols on top - small symbols on the bottom
layer.orderBy = [
{
field: "AADT",
order: "descending", // "descending" | "ascending"
},
];
This property allows you to sort features using any field or Arcade expression that returns a number or a date.
In layers with date fields that have many overlapping features, this property allows you to ensure the most recent features are drawn on top of older features. You can also use this property in proportional symbol maps - such as the map in this example - to render small features on top of large ones using the same field used by the renderer.
By default, features are rendered in the order they are received by the client. Feature order in this scenario may seem random.
Use dark colors for code blocks Copy
Figure A: Average annual daily traffic on Florida roads. Dark, thick lines indicate high traffic roads, whereas light, thin lines are roads with less traffic. Some smaller road features draw on top of the larger ones. This may have the appearance of random rendering artifactsIn proportional symbol maps, feature sort order establishes a clear visual hierarchy. In many cases, seeing all the data at once is preferred. So ordering features with small values on top of features with large values will make it easy for the user to see most features in the view. This is done by sorting features with the field used by the renderer in ascending
order.
Use dark colors for code blocks Copy
1
2
3
4
5
6
layer.orderBy = [
{
field: "AADT",
order: "ascending",
},
];
Figure B: Sorting features based on the renderer's field in ascending order displays small features on top of large features, allowing you to view all or most of the data at once.
Perhaps you want to achieve the opposite scenario - render large features on top of small ones to ensure they always have the most prominence. This is accomplished by setting the order
property to descending
.
Use dark colors for code blocks Copy
1
2
3
4
5
6
layer.orderBy = [
{
field: "AADT",
order: "descending",
},
];
Figure C: Sorting features based on the renderer's field in descending order displays large features on top of small features. This provides a clean visual hierarchy that promotes large, high-traffic highways over smaller roads. This may be desirable depending on the purpose of the map. Note
You can control feature sort order with orderBy
on FeatureLayer, CSVLayer, GeoJSONLayer, and OGCFeatureLayer.
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