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.

There are three methods to editing JSON:

1. Use the Edit JSON tool and edit the entire JSON document in the VTSE JSON editor. This will open the entire JSON document and you will need to scroll to the properties you want to edit. Click to apply your changes and refresh the map.
2. Select a specific layer from Edit layer styles, and then in the Actions menu select Edit JSON. This will focus the JSON editor on the selected layer style JSON properties. Click to apply your changes and refresh the map.
3. Download the JSON document and edit it outside the VTSE, and update the item to replace the JSON document.

We recommend the first two methods as the VTSE will perform some checking and validation of your edits and you can visually inspect your changes and save the updates without leaving the VTSE.

Download and edit outside the VTSE

If you already have a style loaded in VTSE then 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, select a new style or 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 information page will open describing the layer. Select 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 certain style properties 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

• Vector Tile JSON Code Editor.