Change the style of a vector basemap with ArcGIS API for JavaScript

Summary

One of the advantages of using vector basemaps is that the style of the basemaps, such as the color, is customizable using ArcGIS API for JavaScript.

Procedure

The style of vector basemaps can be changed by obtaining the style URL and applying it in the code.

1. Obtain the style URL. To use the style of an existing vector basemap from an ArcGIS Online account, follow the instructions provided below:
   1. Sign in to an ArcGIS Online account, and open the Item Details page of the desired vector basemap.
   2. View the style URL of the vector basemap from the View style option.

3. Copy the style URL. Below is an example of a style URL:

• To use Esri's World Basemap vector tile service with default styling and for other predefined styles, refer to the following document, ArcGIS API for JavaScript: VectorTileLayer.
• To customize the variables of the aforementioned vector basemap styles, modify the root.json file, and create a web URL. For more specification on how the root.json file is built, refer to the following documents, Mapbox: Mapbox Style Specification and GitHub: Vector Tile Specification.

2. Apply the style URL using the following script in ArcGIS API for JavaScript.

   require(["esri/map",
       "esri/layers/FeatureLayer",
       "esri/layers/VectorTileLayer",
       "dojo/domReady!"
   ], function (Map, FeatureLayer, VectorTileLayer) {
   
       //Initializing the map constructor
       var map = new Map("map", {
           center: [-118, 34.5],
           zoom: 8,
           //basemap: "topo"
       });
     
      //When customizing a vector basemap, change the URL to the customized URL.
     var darkGrayStyleURL = "https://www.arcgis.com/sharing/rest/content/items/57436c01bc754dbb87dfb636b6484022/resources/styles/root.json";
     var lightGrayStyleURL = "https://www.arcgis.com/sharing/rest/content/items/1e47168d181248e491541ffd5a91c0de/resources/styles/root.json"
   
       let vectormap = new VectorTileLayer("https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer");
       vectormap.setStyle(lightGrayStyleURL);
       vectormap.on("load", () => {
           map.addLayer(vectormap);
       });
   
   
   
   });