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

Last Published: April 25, 2020


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.


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.
    ], 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 = "";
      var lightGrayStyleURL = ""
        let vectormap = new VectorTileLayer("");
        vectormap.on("load", () => {

Article ID:000016718

  • ArcGIS API for JavaScript 4 x

Get help from ArcGIS experts

Contact technical support

Download the Esri Support App

Go to download options

Related Information

Discover more on this topic