Lines
Customizing Esri's Vector Basemaps: Part 3

This is the third of five Story Maps looking at methods of customizing our selection of Vector Basemaps ... or working with your own.
In this section I'm going to take a look at adjusting lines by working directly or indirectly with the JSON style document. I'll be using the current version of the ArcGIS Vector Tile Style Editor ('Vector Style Editor'). For all of these exercises I'm using the combined Light Gray Canvas layer as a starting point. It has a relatively small level of content, and the neutral palette makes it good for demonstrating changes.
For more information on these, and a fuller introduction, go to part 1 .
Adding Data
To start this exercise I'm going to add some data to the map. This can only be done by working directly with the JSON code.
To start, you will need the Vector Basemaps Reference Document . This lists all of the features that are included in the vector tile layer. Only features that were built into the tile layer can be included, but not all of them are used on every map. The Canvas and Human Geography maps in particular leave out a lot of the available content.
I'm going to add a coastline to the smaller scales. The reference document tells me that it is available between levels 0 and 9:

I can include it at all of these levels, or limit it, but I can't use it outside of this scale range.
Open the map you are working on into the ArcGIS Vector Tile Style Editor (Vector Style Editor). Use the sidebar to open the JSON code editor.
If you are comfortable working in JSON, you can key-in the code to accommodate the new item. In my case, I know that the coastline has been used in our Topographic basemap, so I can cut and paste the new section into my map. (Afterwards I can adjust the values to suit).
Tip: To access the Topographic Map style JSON, open it into a new instance of the Vector Style Editor. Use the 'find' function to find what you need, and copy and paste the relevant code into the preferred location in your hierarchy, Make sure you hit 'update' at the top, and the new feature should appear in the map. The second instance can be closed without saving.
Scale Range
My new coastline is set to be visible to Level 9 ("maxzoom": 10, in the code, to ensure it appears at level 9). At small scale the coastline tends to fill in around areas like the Northwest American coast, so I would prefer it to appear a bit later.
In the Vector Style Editor the scale range control is at the top. I've adjusted it to start at Level 4, and I'll make some color adjustments to fade it in.
Adjusting Stroke Widths
Stroke width is measured in pixels. Our maps are shown at 96 ppi on a standard screen, and at that 1px represents 0.75 pts. The finest line that can be generated is therefore 0.75 points (although, as above, sometimes we will set it a little smaller than that and let it round-up).
High definition screens will generate thinner lines, but their clarity should be about the same, so the 0.75 minimum still holds.
Here is my coastline, with the faded color, and with the width set to 0.75
Multiple Line Symbols
If you want to create a multiple-symbol effect on a single line (for example, a 'cased' road or boundary with a tint band/ribbon), the item needs to be duplicated. This can be done in the 'Actions' option at the top.
Alternatively, you can copy and paste the relevant code in the JSON.
Many of our transport symbols, and some of our boundary lines, have multiple lines already.
For our basemaps, we use the same name, with a '1' (lower line) or '0' (upper line) after. Very occasionally you may find a '2' or '3' if the line is particularly complex. Note that the two sections might be in different parts of the code, depending on the hierarchy of information. In the 'Layers' option they are grouped together.
Here is the Navigation Map, with the 'Freeway/Motorway symbol featured (The group includes separate layers for ramps and tunnels)
If the symbol is a single line and you want to change it, you will need to make the adjustment by adding the new symbol in the code. Copy/paste the relevant section, adjust the values and rename it accordingly.
Stops
As covered in the 'Color' section, the 'stops' option is a way of controlling or adjusting symbols with scale. We use it a lot in our basemaps, and particularly with line width. The width is defined at two or more selected zoom levels, and it increases/decreases progressively at levels in between.
The aim, as far as the available content will allow, is to make the transition from one scale to another as smooth as possible. Ideally the user should not be aware of the symbol changing.
Stops can be added by changing the 'Width' setting to 'Set Value by Zoom Level', and defining as many stops as necessary. Note that the width will change progressively between values, so there is no need to set stops at every zoom level.
I've created a version of the Light gray Basemap, and made a feature of Freeways/Motorways and Highways.
At this scale (Level 9) they are shown by a single brown line.
At this scale (Level 10), a casing is added, and the combined symbol widens further as you zoom in. My colors have been adjusted to try to make the transition from single line to cased as smooth as possible.
In the original Light Gray map, the hierarchy is arranged so that the street lines break the casing of the major roads at large scales. Because I want this map to feature the Freeways etc. I need the casings to be intact.
I changed the Layers view to 'Sort by Drawing Order', and dragged the Freeway and Highway casings layers down so that they draw above the other roads.
Dragging is a bit sticky, so take your time. The alternative would be to go into the code, and do the same thing using cut and paste.
Other Line Tools
There are various other commands that can be adjusted or added to 'tweak' the look of the line. Here is an aggregated list of the ones typically used in our basemaps, including some not discussed above:
More on Customizing Esri's Vector Basemaps
The next parts of this in-depth look are:
These are the earlier parts:
The Vector Tile Style Editor can be found here .