VectorTileLayer - update style | Sample | ArcGIS Maps SDK for JavaScript

This sample shows how to update style layers in the current style of a VectorTileLayer.

The following methods on VectorTileLayer get and set the various properties of style layers in the VectorTileLayer’s currentStyleInfo.style. These methods can be used in a 2D map component without having to reload the entire VectorTileLayer.

getStyleLayer(layerName) - returns a JSON object representing the style layer from the style.
setStyleLayer(styleLayer) - lets you change properties of a specified style layer, add a new style layer, or reorder existing style layers in the style.
deleteStyleLayer(layerName) - deletes a style layer in the style.
setStyleLayerVisibility(layerName, visibility) - toggles the visibility of a given style layer in the style.

// delete a style layer
layer.deleteStyleLayer("City small scale/medium other capital");

// add a new style layer at the specified index
layer.setStyleLayer(styleLayer, 15);

// make a layer visible
layer.setStyleLayerVisibility("Admin0 point/medium", "visible");

// change style layer paint and layout properties at once
const styleLayer = layer.getStyleLayer("City small scale/x large admin0 capital");
styleLayer.paint["text-color"] = "#E400E0";
styleLayer.paint["text-halo-color"] = "#E400E0";
styleLayer.layout["icon-size"] = 1.5;
layer.setStyleLayer(styleLayer);

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>VectorTileLayer - update style | Sample | ArcGIS Maps SDK for JavaScript</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
  </head>
  <body>
    <arcgis-map center="22.441, 48.924" zoom="4">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <calcite-button id="capitalButton" slot="top-right" width="full"> Highlight country capitals </calcite-button>
      <calcite-button id="waterButton" slot="top-right" width="full"> Change water color </calcite-button>
      <calcite-button id="toggleVisibility" slot="top-right" width="full"> Toggle country labels </calcite-button>
      <calcite-button id="deleteButton" slot="top-right" width="full"> Delete small cities </calcite-button>
    </arcgis-map>

    <script type="module">
      const [Map, VectorTileLayer] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/VectorTileLayer.js",
      ]);

      // colored pencil style
      const layer = new VectorTileLayer({
        url: "https://www.arcgis.com/sharing/rest/content/items/4cf7e1fb9f254dcda9c8fbadb15cf0f8/resources/styles/root.json",
      });

      const viewElement = document.querySelector("arcgis-map");
      viewElement.map = new Map({
        layers: [layer],
      });

      const capitalButton = document.getElementById("capitalButton");
      const waterButton = document.getElementById("waterButton");
      const deleteButton = document.getElementById("deleteButton");
      const toggleVisibilityButton = document.getElementById("toggleVisibility");

      // Switching between highlighting and unselecting country capital symbol layers
      capitalButton.addEventListener("click", () => {
        const styleLayer = layer.getStyleLayer("City small scale/x large admin0 capital");
        if (!styleLayer) {
          return;
        }

        if (styleLayer.paint["text-color"] === "#be1313") {
          styleLayer.paint["text-color"] = "#E400E0";
          styleLayer.paint["text-halo-color"] = "#E400E0";
          styleLayer.layout["icon-size"] = 1.5;
          capitalButton.textContent = "Deselect country capitals";
        } else {
          styleLayer.paint["text-color"] = "#be1313";
          styleLayer.paint["text-halo-color"] = "";
          styleLayer.layout["icon-size"] = 1;
          capitalButton.textContent = "Highlight country capitals";
        }

        layer.setStyleLayer(styleLayer);
      });

      // all water body style layer names
      const waterStyleLayers = [
        "Marine area/bathymetry depth 1/2",
        "Bathymetry/depth 5/1",
        "Bathymetry/depth 4/1",
        "Bathymetry/depth 3/1",
        "Bathymetry/depth 2 (shallow water)/1",
        "Bathymetry/depth 6/1",
        "Water area small scale/1",
      ];

      // change fill-pattern and fill-color paint properties for water body style layers
      waterButton.addEventListener("click", () => {
        for (const layerName of waterStyleLayers) {
          const paintProperties = layer.getPaintProperties(layerName);
          if (!paintProperties) {
            continue;
          }

          if (paintProperties["fill-pattern"] === "") {
            paintProperties["fill-pattern"] = "Marine area";
            waterButton.textContent = "Change water color";
          } else {
            paintProperties["fill-pattern"] = "";
            paintProperties["fill-color"] = "aqua";
            waterButton.textContent = "Change water pattern";
          }

          // change the fill-color paint property for the layer.
          layer.setPaintProperties(layerName, paintProperties);
        }
      });

      // delete all non-capital cities symbol layers from the style
      const deleteLayerNames = [
        "City small scale/medium other capital",
        "City small scale/large other capital",
        "City small scale/x large admin1 capital",
        "City small scale/medium non capital",
        "City small scale/x large non capital",
        "City small scale/large non capital",
      ];
      let deletedStyleLayers = [];

      // delete or add small cities style layers
      deleteButton.addEventListener("click", () => {
        // delete the style layers if they exist in the style
        if (deletedStyleLayers.length === 0) {
          for (const layerName of deleteLayerNames) {
            const styleLayer = layer.getStyleLayer(layerName);
            const index = layer.getStyleLayerIndex(layerName);
            if (index !== -1) {
              deletedStyleLayers.push({
                layer: styleLayer,
                index,
              });
              layer.deleteStyleLayer(layerName);
            }
          }
          deleteButton.textContent = "Add small cities";
        }
        // add the layers back to the style at their original index
        else {
          for (const item of deletedStyleLayers) {
            layer.setStyleLayer(item.layer, item.index);
          }
          deletedStyleLayers = [];
          deleteButton.textContent = "Delete small cities";
        }
      });

      let isVisible = false;
      const toggleLayers = [
        "Admin0 point/medium",
        "Admin0 point/x large",
        "Admin0 point/large",
        "Admin0 point/small",
        "Admin0 point/2x large",
      ];

      // toggle visibility country names symbol layer
      toggleVisibilityButton.addEventListener("click", () => {
        isVisible = !isVisible;
        const visibleValue = isVisible ? "none" : "visible";
        for (const layerName of toggleLayers) {
          layer.setStyleLayerVisibility(layerName, visibleValue);
        }
      });
    </script>
  </body>
</html>