Style Vector Tiles from an attribute in JS API 4.20

Question

I am trying to apply attribute-driven client-side styling to a custom vector tile layer (published to ArcGIS Online from Pro) in the ArcGIS JavaScript API v 4.20 .  Specifically, I would like to use color stops to style polygon fill-color based on an attribute.  I have been able to use setPaintProperties to change the default color of the layer (code below).  However, I have not been able to set the "property" to an attribute, as described in the Mapbox style layer documentation that is linked from the setPaintProperties documentation.  I have successfully used this approach with Mapbox GL using vector tiles, but am unsure if it is possible in the JS API v4.20.

This is the code I'm trying to get to work.  When executed, it applies the red default color.

styleMap(){

const paintProperties = vtLayer.getPaintProperties("myLayer");
    var fill ={
      property: "myAttribute",
      default: 'red',
      stops: [
        [0 , '#a1a1a1'],
        [10000, '#ccece6'],
        [200000, '#99d8c9'],
        [500000, '#66c2a4'],
        [1000000, '#2ca25f'],
        [15000000, '#006d2c'],
      ]
    }
    paintProperties["fill-color"] =fill;
    vtLayer.setPaintProperties("myLayer", paintProperties);
  }

Is this supported and/or are there plans for it to be supported in future versions?

Thanks,

Erik

3kmsdistance · Answer

can you change fill-color paint properties in these test app?
I have a problem https://community.esri.com/t5/arcgis-api-for-javascript-questions/is-expression-supported-in-the-styles-in-arcgis/m-p/1180554#M77617
I view source code failed to resolve, but it feel like there is something wrong with the source code

ErikMartin · Answer

Thank you, Undral, for the reply.  Those were good suggestions but, after wracking my brain for hours staring at the JS, it turns out my issue was in the vector tile generation -- needed to go back, select the attributes I wanted to include in the tiles and rebuild the cache.  Thanks again for the help!

UndralBatsukh · Answer

Hi there,

This is supported and should work. I do see couple of issues in your paint properties json... All property names should be surrounded by double quotes (") and also the color names should be surrounded by double quotes. JSON does not accept single quotes (').

So please try changing your json to the following and it should work.

var fill ={
      "property": "myAttribute",
      "default": "red",
      "stops": [
        [0 , "#a1a1a1"],
        [10000, "#ccece6"],
        [200000, "#99d8c9"],
        [500000, "#66c2a4"],
        [1000000, "#2ca25f"],
        [15000000, "#006d2c"],
      ]
    }

This test app shows how to change circle-color paint properties the same way you want to change and it is working. I added two buttons to the app... One button shows how to use setPaintProperties and the other button uses setStyleLayer method to change the style properties.

Hope this helps,

-Undral