How can I change the styling of a VectorTileLayer "live" and without reloading tiles?

ChristophKisfeld — Sun, 12 Dec 2021 02:13:41 GMT

I managed to create a VectorTileLayer and add it to my map (code at the end of this question).

My question is: How I can change the styling of data in a vector tile layer without it having to reload all data in the viewport? My dataset is quite big (about 1MB at zoom level 13+) and I want to avoid too much traffic.

I searched GeoNET and found a few threads about styling and changing styling, for example:

Changing ocean color in Vector Style Editor?
Adding Custom Style to Vector Tiles
Vector Tiles and Styles (not Javascript, but quite similar to my question)

The ArcGIS Javascript 4.9 API documentation on Vector Tiles says (emphasis mine):

Styles may contain multiple options for rendering the same type of feature. In a street layer, for example, major highways might have three symbology options. The symbology can be changed on the client without having to make a request for a new tile from the server.

However I am unable to find any working examples where styles are changed live and without additional requests. The ArcGIS Vector Style Editor has this issue as well.

What I tried:

Overwriting my layer's "style" property, no visible change
Overwriting my layer's "currentStyleInfo" property, no visible change
Poke around in some other internal properties... no visible change
Use layer.loadStyle(JSONObject) - applies the new styling, but reloads all data
Provide a few styles in the initial styles "layers" property - only the last style provided is applied, how do I change between those?

Example code:

- creates a VectorTileLayer

- styling is circles that have a color ramp fill-color based on an attribute

var vtLayer = new VectorTileLayer({
  minScale: 140000,
  style: {
    "version": 8,
    "sprite": "https://example.com/VectorTileServer/resources/sprites/sprite",
    "glyphs": "https://example.com/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf",
    "sources": {
      "esri": {
        "type": "vector",
        "url": "https://example.com/VectorTileServer"
      }
    },
    "layers": [
      {
        "id": "my_attrib/min",
        "type": "circle",
        "source": "esri",
        "source-layer": "my_attrib",
        "filter": [
          "==",
          "_symbol",
          2
        ],
        "layout": {
          "icon-image": "my_attrib/min",
          "icon-allow-overlap": true
        },
        "paint": {
          "circle-radius": 5,
          "circle-stroke-width": 1,
          "circle-stroke-color": "#FFFFFF",
          "circle-color": {
            "property": "my_attribute",
            "default": "#000000",
            "stops": [
              [-10, "#FF0000"],
              [-5, "#FFFF00"],
              [0, "#00FF00"],
              [5, "#00FFFF"],
              [10, "#0000FF"]
            ]
          }
        }
      }
    ]
  }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How can I change the styling of a VectorTileLayer "live" and without reloading tiles?

UndralBatsukh — Tue, 30 Oct 2018 21:20:46 GMT

Hi there,

It is not possible to do what you are asking at the current release. But we are looking into adding this functionality for vector tiles for a future release.

Re: How can I change the styling of a VectorTileLayer "live" and without reloading tiles?

UndralBatsukh — Mon, 05 Nov 2018 20:54:06 GMT

Hi there,

Just want to let you know that this functionality will become available at 4.10.

topic Re: How can I change the styling of a VectorTileLayer "live" and without reloading tiles? in ArcGIS JavaScript Maps SDK Questions

How can I change the styling of a VectorTileLayer "live" and without reloading tiles?

Re: How can I change the styling of a VectorTileLayer "live" and without reloading tiles?

Re: How can I change the styling of a VectorTileLayer "live" and without reloading tiles?