Style Vector Tiles from an attribute in JS API 4.20

117
2
09-21-2021 06:45 AM
ErikMartin
Occasional Contributor

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

0 Kudos
2 Replies
UndralBatsukh
Esri Regular Contributor

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

0 Kudos
ErikMartin
Occasional Contributor

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!

0 Kudos