Does VectorTileLayer support data-driven styles?

[FayuLai]

Hello,

I was reading the ArcGIS API for JavaScript version 4.9 documentation and have some questions.

Documentation details:
Page title: VectorTileLayer | API Reference | ArcGIS API for JavaScript 4.9
Page URL: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-VectorTileLayer.html

Does VectorTileLayer support data-driven styles? I want to set line color based on the values of “pipelength” property.

I try two ways as  following, but neither works. Does ESRI have some specific format for VectorTileLayer data-driven style?

          'line-color': {

            "property": "pipelength",

            "stops": [

              [500, '#51bbd6'],

              [1000, '#f28cb1']

            ]

          }

          'line-color': [

            "step",

            ["get", "pipelength"],

            "#51bbd6",

            500,

            "#f1f075",

            1000,

            "#f28cb1"

          ]

[UndralBatsukh]

Hi there, 

Very short answer is yes.

Here are the requirements for the data driven styles:  JS API started supporting data driven style starting at 3.23 and 4.6. The vector tiles must be created using ArcGIS Pro 2.1 and published with ArcGIS 10.6. 

Search for vector tiles in the following doc to see what kind of data driven styles are supported for vector tiles. 

What's new in ArcGIS Pro 2.1—ArcGIS Pro | ArcGIS Desktop 

So if all requirements are met, then your first snippet should work. Expressions are not supported with vector tiles so the second snippet won't work.

Hope this helps,

-Undral

[XingZhang1]

Hi Undral,

Thanks for your explanation! I'm Fayu Lai‌'s colleague from the same company.

I have two questions about this topic:

1. Do you have any plan to support Expressions for data-driven style of VectorTileLayer?

2. I followed your instructions and published a vector tiles using ArcGIS Pro 2.2:

https://tiles.arcgis.com/tiles/LjXACVRBffrUtGL8/arcgis/rest/services/Conduit/VectorTileServer 

It has a Line layer called "ssGravityMain" which element color is based on "PipeLength" property.

I noticed it has similar style settings as you suggested:

"line-color":{"property":"PipeLength","default":"#000000","stops":[[-5,"#17F4F7"],[998.804,"#5719F4"],[2002.61,"#FF25F5"]]}

in its default styles:

https://tiles.arcgis.com/tiles/LjXACVRBffrUtGL8/arcgis/rest/services/Conduit/VectorTileServer/resour...

Everything works fine if I show it using built-in map view of ArcGIS Online.

But it doesn't work if I use ArcGIS API for JavaScript version 4.9. Here is a simple sample code:

https://codepen.io/anon/pen/WaEOJy 

You can find "Bad buffer type 8" error message on Chrome console:

That is exactly the same error when I used the Fayu's first snippet before.

Thanks,

Xing

[UndralBatsukh]

Hi there, 

I am really sorry it took me this long to reply. Somehow I did not see your post until today. 

Answer to your first question is No. We do not have plans to support expressions for data-driven styles. 

I logged an internal issue for your second question. It is definitely an issue. 

Thanks,

-Undral

[XingZhang1]

Hi Undral,

Thanks for your response!

I appreciate that the issue could be fixed. And I also hope the expressions support got implemented in future because it is very useful.

Thanks,

Xing