UniqueValueRenderer

// this symbol will be applied to all features. It is only
// necessary when visualizing polygon data with icons.
renderer.backgroundFillSymbol = {
  type: "simple-fill",
  outline: {
    width: 1,
    color: "gray"
  }
};

let renderer = {
  type: "unique-value",  // autocasts as new UniqueValueRenderer()
  field: "RANK",  // contains values referenced in uniqueValueInfos
  uniqueValueInfos: [
    {
      value: "high",  // features labeled as "high"
      symbol: sym1  // will be assigned sym1
    }, {
      value: "medium",  // features labeled as "medium"
      symbol: sym2  // will be assigned sym2
    }, {
      value: "low",  // features labeled as "low"
      symbol: sym3  // will be assigned sym2
    }
  ]
};

// categorizes combinations of values in field and field2 with uniqueValueInfos
let renderer = {
  type: "unique-value",  // autocasts as new UniqueValueRenderer()
  field: "REGION",
  field2: "RANK",
  fieldDelimiter: ", ",  // comma + space used to separate values from all fields
  uniqueValueInfos: [
    {
      value: "North, 1",  // features in the "North" region and a rank of 1
      symbol: sym1  // will be assigned sym1
    }, {
      value: "North, 2",  // features in the "North" region and a rank of 2
      symbol: sym2  // will be assigned sym2
    }, {
      value: "South, 1",  // features in the "South" region and a rank of 1
      symbol: sym3  // will be assigned sym3
    }, {
      value: "South, 2",  // features in the "South" region and a rank of 2
      symbol: sym4  // will be assigned sym4
    }
  ]
};

// categorizes combinations of values in field and field2 with uniqueValueGroups
let renderer = {
  type: "unique-value",  // autocasts as new UniqueValueRenderer()
  field: "Obesity_prevalence",  // values are either "high" or "low"
  field2: "Diabetes_prevalence",  // values are either "high" or "low"
  uniqueValueGroups: [{
    classes: [{
      symbol: {
        // an object of common symbol properties
        ...commonProperties,
        color: "yellow"
      },
      label: "Low obesity; Low diabetes",
      values: {
        value: "low",
        value2: "low"
      }
    }, {
      symbol: {
        ...commonProperties,
        color: "orange"
      },
      label: "Low obesity; High diabetes",
      values: {
        value: "low",
        value2: "high"
      }
    }, {
      symbol: {
        ...commonProperties,
        color: "red"
      },
      label: "High obesity; Low diabetes",
      values: {
        value: "high",
        value2: "low"
      }
    }, {
      symbol: {
        ...commonProperties,
        color: "purple"
      },
      label: "High obesity; High diabetes",
      values: {
        value: "high",
        value2: "high"
      }
    }]
  }]
};

// categorizes combinations of values in field, field2, and field3 with uniqueValueInfos
let renderer = {
  type: "unique-value",  // autocasts as new UniqueValueRenderer()
  field: "REGION",
  field2: "RANK",
  field3: "CLASS",
  fieldDelimiter: " | ",  // pipe symbol padded with spaces used to separate values from all fields
  uniqueValueInfos: [
    {
      value: "North | 1 | medium",  // features in the "North" region, a rank of 1, and "medium" class
      symbol: sym1  // will be assigned sym1
    }, {
      value: "North | 2 | medium",  // features in the "North" region, a rank of 2, and a "medium class
      symbol: sym2  // will be assigned sym2
    },
    ...
  ]
};

// categorizes combinations of values in field, field2, and field3 with uniqueValueGroups
let renderer = {
  type: "unique-value",  // autocasts as new UniqueValueRenderer()
  field: "Obesity_prevalence",  // values are either "high" or "low"
  field2: "Diabetes_prevalence",  // values are either "high" or "low"
  field3: "Alcohol_nat_avg" // values are either "above" or "below" national average
  uniqueValueGroups: [{
    classes: [{
      symbol: {
        // an object of common symbol properties
        ...commonProperties,
        color: "yellow"
      },
      label: "Low obesity; Low diabetes; Low alcohol",
      values: {
        value: "low",
        value2: "low",
        value3: "low"
      }
    }, {
      symbol: {
        ...commonProperties,
        color: "orange"
      },
      label: "Low obesity; High diabetes; High alcohol",
      values: {
        value: "low",
        value2: "high",
        value3: "high"
      }
    }]
  }]
};

let renderer = {
  type: "unique-value",  // autocasts as new UniqueValueRenderer()
  field: "REGION",
  field2: "RANK",
  fieldDelimiter: ", ",  // comma + space used to separate values from all fields
  uniqueValueInfos: [
    {
      value: "North, 1",  // features in the "North" region and a rank of 1
      symbol: sym1  // will be assigned sym1
    }, {
      value: "North, 2",  // features in the "North" region and a rank of 2
      symbol: sym2  // will be assigned sym2
    },
    ...
  ]
};

renderer.legendOptions = {
  title: "Classification",
  order: "descending-values",
};

renderer.orderByClassesEnabled = true;

layer.renderer = {
  type: "unique-value",
  field: "zonecode",
  uniqueValueGroups: [{
    heading: "Commercial",
    classes: [{
      label: "C-2 | Community Commercial",
      symbol: createSymbol([255,179,219]),
      values: ["C-1", "C-2"]
    }, {
      label: "C-3 | Major Commercial",
      symbol: createSymbol([255,0,0]),
      values: "C-3"
    }]
  }, {
    heading: "Residential",
    classes: [{
      label: "R-1 | Low-Density Residential",
      symbol: createSymbol([255,255,224]),
      values: "R-1"
    }, {
      label: "R-3 | Limited High-Density Residential",
      symbol: createSymbol([255,214,0]),
      values: "R-3"
    }, {
      label: "R-4 | High-Density Residential",
      symbol: createSymbol([255,166,0]),
      values: "R-4",
    }]
  }, {
    heading: "Other",
    classes: [{
      label: "S | Special Area",
      symbol: createSymbol([161,237,237]),
      values: ["S-DW", "S-DR", "S-RP", "S-JW", "S-RN", "S-WS"]
    }]
  }]
};

layer.renderer = {
  type: "unique-value",
  field: "zonecode",
  uniqueValueInfos: [{
    label: "C-2 | Community Commercial",
    symbol: createSymbol([255,179,219]),
    value: "C-2"
  }, {
    label: "C-3 | Major Commercial",
    symbol: createSymbol([255,0,0]),
    value: "C-3"
  }, {
    label: "R-1 | Low-Density Residential",
    symbol: createSymbol([255,255,224]),
    value: "R-1"
  }, {
    label: "R-3 | Limited High-Density Residential",
    symbol: createSymbol([255,214,0]),
    value: "R-3"
  }, {
    label: "R-4 | High-Density Residential",
    symbol: createSymbol([255,166,0]),
    value: "R-4"
  }]
};

let renderer = {
  type: "unique-value",  // autocasts as new UniqueValueRenderer()
  valueExpression: "When($feature.count < 20, 'low', $feature.count >= 20 && $feature.count < 70, 'moderate', $feature.count >=70, 'high', 'other')",
  uniqueValueInfos: [ ... ],  // assigns symbols to features evaluating to 'low', 'moderate', or 'high'
};

renderer.valueExpression = "IIF($feature.POP > 500000, 'high', 'low')";
renderer.valueExpressionTitle = "Classification";

let renderer = {
  type: "unique-value",  // autocasts as new UniqueValueRenderer()
  field: "REGION",
  defaultSymbol: { type: "simple-fill" }   // autocasts as new SimpleFillSymbol()
};
// Add a unique value info for the "North" region
// using individual function arguments
renderer.addUniqueValueInfo({
  value: "North",
  symbol: {
    type: "simple-fill",  // autocasts as new SimpleFillSymbol()
    color: "blue"
  }
});

// Add a unique value info for the "West" region
// using a unique info object
renderer.addUniqueValueInfo({
  value: "West",
  symbol: new SimpleFillSymbol({
    color: "yellow"
  }),
  label: "West region"  // will display this text in legend
});

// Creates a deep clone of the first layer's renderer
let renderer = view.map.layers.at(0).renderer.clone();

view.on("click", function(event){
  view.hitTest(event)
    .then(function(hitResponse){
      const resultGraphic = hitResponse.results[0].graphic;
      // assumes the layer's renderer is a UniqueValueRenderer instance
      return layer.renderer.getUniqueValueInfo(resultGraphic);
    }).then(function(uniqueValueInfo){
      // returns the unique value info to which the graphic belongs.
    });
});

// removes the unique value info object for
// features in the West region. They will now
// be displayed with the default symbol and label
renderer.removeUniqueValueInfo("West");