How to dynamically color VectorTileLayer in JavaScript 4.6?

Question

How does one dynamically style a vector tile layer based on data that is external to the layer?

Filtering clearly works, per George Bochenek example: GitHub - gbochenek/vector-tile-demo-js: Demo Application for switching vector tile styles on the fly  Likewise, the paint.fill-color can be changed to a single color.

However, as soon as I add an expression, the layer disappears. Does ArcGIS Javascript 4.6 not support the full Mapbox spec?  For example, we should be able to use a match expression like this:

tileLayerStyle.paint['fill-color'] = [ "match", [ "get", "Origin"], "ORD", "#FF0000", "DEN", "#FF0000", "#000000" ];

So if that isn't supported, what is the recommended way of doing this type of styling?

RRubalcava · Answer

If each of those 10,000 features has a different color, than technically yes. You could classify the data to a narrower set, and use the filter option per layer and designate the color.

Similar to Geoge's sample, with this line:

tileLayerStyle.filter = ["any",["==", "Origin", airport],["==", "Dest", airport]];

But then apply a fill-color to it.

You could precook the tiles in Pro and see what the output style file looks like.

With 10,000 features, you could probably use the WebGL FeatureLayer and visual variables to accomplish this as well against the raw data.

JohnChmura · Answer

Rene,

To make sure I understand...

If we have a VTLayer with say, 10,000 "features", and want to do a continuous color vis, we'd have to create a style with 10,000 layers?  Each layer with a single feature and a different color assigned?

RRubalcava · Answer

You can create a copy of the style property, modify the JSON object of the style for the VTLayer and reapply it using the loadStyle() method.

We don't support expressions in the styles, and I don't know if that's planned at all.