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.

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.

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.

Related samples and resources