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

1030
2
Jump to solution
10-30-2018 10:00 AM
ChristophKisfeld
New Contributor

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:

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"]
            ]
          }
        }
      }
    ]
  }
});
0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

Hi there, 

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

View solution in original post

2 Replies
UndralBatsukh
Esri Regular Contributor

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. 

UndralBatsukh
Esri Regular Contributor

Hi there, 

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