AnsweredAssumed Answered

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

Question asked by c.kisfeldconterra-de-esridist Employee on Oct 30, 2018
Latest reply on Nov 5, 2018 by ubatsukh-esristaff

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"]
            ]
          }
        }
      }
    ]
  }
});

Outcomes