Color FeatureLayer by dynamic RGB or HEX attribute values

10-26-2021 06:23 AM
New Contributor

I am trying to render a large dataset of points or polygons, and colour them directly based on hex or RGB values that exist directly in the attributes of each feature.

I do not want to use a UniqueValueRenderer to manually define stops, etc.  I just want to send the RGB value from the attributes directly into the renderer for that point/polygon.  This is very simple to do with Mapbox, but seemingly not simple with the ArcGIS Javascript API?

My very simple renderer - I just want color to directly use the HEX in the attributes of each feature.

renderer: {
  type: "simple",
  symbol: {
    type: "simple-fill",
    color: <make-me-attribute-driven>,
    outline: null


Note: I can do this manually by using a GraphicsLayer and creating each graphic individually where I define it's colour etc, however I want to take advantage of Clustering and some of the other FeatureLayer capabilities not available to GraphicsLayers.

Is this actually possible?  All the examples use UniqueValueRenderer to colour based on a defined number of stops, which is not what I want.



0 Kudos
3 Replies
Frequent Contributor

You can use the color visual variables to accomplish this. Check out this guide page.

0 Kudos
New Contributor

I still can't quite see how this achieves my requirements.

The documentation still implies I need the following:

  1. A reference to a data value either from a field name, or an Arcade expression.
  2. At least two color stops that match data values to colors. The colors of symbols with data values between the designated stops are linearly interpolated.


I'm not looking to do a colour ramp based on a scalar variable, I need to use the exact HEX code from my attributes to colour my geometry.  

Using the above, I would need to define a colour stop for every single HEX value I might find in my attributes.  Because I'm wanting to visualise potentially 1000's of features each with a specific and not predetermined HEX colour, this isn't really feasible (i'd potentially need 1000's of colour stops to do this)

0 Kudos
Frequent Contributor

Ah, ok. this is something that can be done via CIMSymbol and primitive overrides. Here's a sample.

primitiveOverrides: [
        type: "CIMPrimitiveOverride",
        primitiveName: "colorOverride",
        propertyName: "Color",
        valueExpressionInfo: {
        type: "CIMExpressionInfo",
        title: "Arcade color override",
        expression: `
            // return "rgb(0,255,0)"
            return $feature.NAIP_rgb;
        returnType: "Default"