Sort features by legend order

Explore in the sandboxView live

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
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
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.