Sort features by legend order

This sample demonstrates how to sort the order features are drawn in the view to match the legend order defined for unique value infos of a UniqueValueRenderer. To match feature draw order to the legend order, set the orderByClassesEnabled property to true.

Use dark colors for code blocksCopy
1
renderer.orderByClassesEnabled = true;

The layer in this app renders the locations of car crashes in New York City. Each crash is classified into one of three categories using a UniqueValueRenderer:

  • Resulted in a fatality
  • Resulted in injury
  • No injuries or fatalities

Since crashes involving fatalities are of most concern, they should be rendered on top of all other features. Crashes that did not result in a fatality, but did involve injuries are more serious than those that resulted in no injuries. Therefore, they will be rendered below fatalities, but above crashes with no injuries.

Use dark colors for code blocksCopy
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
layer.renderer = {
  type: "unique-value",
  orderByClassesEnabled: true,
  // features will draw in the order
  // specified in uniqueValueInfos
  uniqueValueInfos: [{
    value: "Fatality",
    symbol: {
      type: "simple-marker",
      color: "red"
      // ...other symbol properties
    }
  }, {
    value: "Injury",
    symbol: {
      type: "simple-marker",
      color: "blue"
      // ...other symbol properties
    }
  }, {
    value: "None",
    symbol: {
      type: "simple-marker",
      color: "yellow"
      // ...other symbol properties
    }
  }]
}

The layer's orderBy property also defines feature draw order in the view. If this property is defined, then the order specified there will always take precedence over UniqueValueRenderer.orderByClassesEnabled.

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