Configure feature sort order

Explore in the sandboxView live

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
55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 55 56 57 58 59 60 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61
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
<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Configure feature sort order | Sample | ArcGIS API for JavaScript 4.21</title>

    <script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.61/calcite.esm.js"></script>
    <script nomodule="" src="https://js.arcgis.com/calcite-components/1.0.0-beta.61/calcite.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.61/calcite.css" />

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      .esri-legend .esri-legend__layer-caption {
        display: none;
      #legend {
        width: 260px;
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.21/"></script>

    <script>
      require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Legend"
      ], (
      ) => {
        const view = new MapView({
          container: "viewDiv",
          map: new WebMap({
            portalItem: {
              id: "bbebcc87fa704dc3a505050fb1bb52f5"
        view.when().then(() => {
          const layer = view.map.layers.getItemAt(0);
          // Sort features by average traffic count
          // large symbols on top - small symbols on the bottom
          layer.orderBy = [{
            field: "AADT",
            order: "descending"  // "descending" | "ascending"
          }];
          const sortOrder = document.getElementById("sort-order");
          const ascText = "Sort features with small values on top";
          const descText = "Sort features with large values on top";
          // logic for toggling ascending and descending order
          sortOrder.addEventListener("click", () => {
            const order = layer.orderBy[0].order === "ascending" ? "descending" : "ascending";
              field: "AADT",
            // toggles ui icon and description for the sortOrder button
            if (order === "ascending"){
              sortOrder.icon = `sort-descending-arrow`;
            } else {
              sortOrder.icon = `sort-ascending-arrow`;
        view.ui.add("legend", "bottom-left");
        new Legend({
          container: "legend",
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="legend">
      <calcite-action active id="sort-order" text="Sort features with small values on top" text-enabled icon="sort-ascending-arrow" scale="s"></calcite-action>
    </div>
  </body>
</html>

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.

 
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.

    
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.

    
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.