Configure feature sort order

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 blocksCopy
55 56 57 58 59 60
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
          // 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 blocksCopy
1
layer.orderBy = null;
Default drawing order
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 artifacts

In 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 blocksCopy
1
2
3
4
layer.orderBy = [{
  field: "AADT",
  order: "ascending"
}];
Ascending order
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 blocksCopy
1
2
3
4
layer.orderBy = [{
  field: "AADT",
  order: "descending"
}];
Descending drawing order
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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.