Editing JSON

Vector tile basemaps are pre-styled vector tile layers that use JSON to define the styling parameters and effects. This section explains how to update styles by making changes to the JSON properties.

If you are already using VTSE, you can click the Download current style () icon to download the JSON for the current style. If so, skip to the Edit the JSON style file section below.

Otherwise, make a copy of an existing basemap and download the JSON for that style.

Copy a basemap layer from ArcGIS Online

Sign in to ArcGIS Online, click Map and add a vector tile layer by clicking Add. Select Search for Layers and type esri vector basemap. Click Go.

Select any of the layers, click Add and then Done Adding Layers. In the table of contents, hover above the ... icon above the the new layer and click More Options. Select Copy, and in the new copied layer select Save Layer. Update your info and select the Create Item button.

Download the style

Hover above the new layer you created, click More Options and select Show Item Details. An informational page will open describing the layer. Select Download Style.

agol download style

The style is download as a JSON file, root.json.

Edit the JSON style file

Open the JSON file in your favorite editor, and make any changes to the vector tile styles by hand.

The Esri vector basemaps are based on the Mapbox vector tile specification. See the Mapbox GL Style Reference. Below is an example JSON style, with the URLs and all but the Urban area style removed for brevity.

                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
 "version": 8,
 "sprite": "... url ...",
 "glyphs": "... url ...": {
     "esri": {
         "type": "vector",
         "url": "... url ..."
     }
 },
 "layers": [ /* a very long list of vector tile styles */
     {
         "id": "Urban area",
         "type": "fill",
         "source": "esri",
         "source-layer": "Urban area",
         "minzoom": 5,
         "maxzoom": 15,
         "layout": {},
         "paint": {
             "fill-color": {
                 "stops": [
                     [ 5, "#e3dfdc" ],
                     [ 10, "#ECE8E3" ],
                     [ 15, "#f2eee9" ]
                 ]
             }
         }
     }
    ],
   "metadata": {
       "arcgisStyleUrl": ".../root.json",
       "arcgisOriginalItemTitle": "My own stylized basemap",
       "arcgisEditorExtents": [
           {
               "spatialReference": {
                   "wkid": 102100
               },
               "xmin": -13752117.134841962,
               "ymin": 5660215.840424524,
               "xmax": -13560260.193846097,
               "ymax": 5744755.193707961
           }

           /* plus some other extents */
       ],
       "arcgisMinimapVisibility": true
   }
}

Upload your style

After you save your new style, go back to the copy of the layer you created, and go to the item details page. Click Update and choose the file that you saved.

Click Update Item button.

That's it! You've updated the style by editing JSON.

Use your new style

Click the Open button and select Add layer. Add the layer with your new style.

Additional tools

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.