English

How To: 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.
User-added image
  1. Copy the style URL. Below is an example of a style URL:
User-added image
  1. 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);
        });
    
    
    
    });

Related Information