ArcGIS Living Atlas

Earth Art with the Vector Tile Style Editor

Image showing I love Vector Tile Style Editor.

One of my favorite ways to style maps is with the Vector Tile Style Editor.  What’s so wonderful about it is that you can take things that you like from one Esri basemap and join it with another. For example, check out this map which is the Esri World Imagery and World Topographic Basemap mixed together.

Webmap showing the two basemaps together styled in the Vector Tile Style Editor.

This hybrid approach allows the best of both types of basemaps.  You get the context of reality while subtracting out everything else with a simplified digital representation.

The way this map was designed was at the global scale, the land is masked out by the Topographic Map.  Then as you zoom in, the beautiful World Imagery is revealed using opacity driven land and vegetation layers from the Topographic Map.  This allows the basemap to be in a good position to have other data placed over it (Note for a good working example, this is how the basemap for the Wildfire Aware app was created).

Eight maps showing before and after images of World Imagery and then with World Imagery and Topographic together.

While working on the map above, I came across another visualization that I thought was really intriguing.  Check out what happens when you combine World Contours and World Imagery, it looks like it was outlined with a pen by a terrain artist.  These contours help accentuate the land very elegantly.  They don’t come on until 1:72,224 and then wow!  It’s like the depressions and cliffs come alive!  I’m seeing things that I don’t normally see in the imagery and I really love that.

Eight maps showing before and after images of World Imagery with Global Contours.

How to do this?

Start by signing in with the Vector Tile Style Editor.  Click on the top right green button for “+ New Style” and scroll almost to the bottom and select the World Topographic Map (with Contours and Hillshade).

Image showing where to select the World Topographic Map with Contours in the Vector Tile Style Editor.

When it opens, click on the icon for Edit Layer Styles.

Vector Tile Style Editor interface showing where to click for Edit Layer Styles.

There is a list of different layers that comprise this basemap.  Expand some of them and you can see that there are nested categories of layers for customization (polygon fills, lines, fonts, and sprites).

Vector Tile Style Editor interface showing the different layers that can be styled.

For our purposes we are only interested in a few layers that are found within Natural, Land Use, and Water categories.  You could use the Editor to go in and turn off all of the unneeded layers one by one, but it’s faster to remove them directly from the code using the JSON editor.

Vector Tile Style Editor interface showing where to click for the JSON Editor.

For this workflow, I find having a Notepad++ document (or other text editor that keeps the JSON formatting intact) helps to keep me organized. It also allows you to backup the code when done. If you prefer, you could also do this within the code editor by deleting what you don’t want.

For this map the only layers we are interested in from the Topographic Map are:

Natural – Hillshade, Land, Vegetation, Forest or Park, Contours

Land Use – Park or farming

Water – Ocean, Bathymetry, Lakes

This ends of being 1,249 lines of code ending on “Water area/Lake, river or bay”.

What we are going to do is copy/paste the sections of the code we need and put them into the Notepad++ document.  Let’s start at the top by copying all the Hillshade layers plus the beginning JSON formatting.  This is line 1-113.

Vector Tile Style Editor interface showing how to select and copy the JSON code.

Next paste that section of code into a Notepad++ window. You should end with “Hillshade/Shadow Very Strong/1” at the bottom when you get it all in, and mind that you to get the comma you see on line 113.  This helps to keep the formatting consistent as you go through it.

Notepad++ document with the pasted code.

It’s the same workflow for all of the other layers required – copy and paste each section of the code that’s needed and place them in a Notepad++ document until everything is there.  This will take some time and attention to scan through the code and find everything you need.

Notepad++ document showing 1,249 lines of code.

Once everything is there, double check the formatting.  Next copy the entirety of the “new” code from Notepad ++ document and then paste it back into the JSON Editor and Update it.  If the code doesn’t work, check the code for errors.  You might be missing a comma or brace.  To double check, you can download the completed code here.

Animated gif showing how to copy the code from the Notepad++ document into the Vector Tile Style Editor JSON Editor.

Now this basemap contains only the layers we want.

Vector Tile Style Editor interface showing the new layers available in the map.

Save this as a new Vector Tile Layer in your account.

Styling

Let’s walk through the visualization settings for of each of the layers.

Hillshade: This layer is an awesome addition to our options for terrain visualization!  As customizable vector tiles!  For this map the default colors were kept, but their opacity was adjusted for every layer, so that it goes from 25% opacity at “0 Zoom” to 0% 0pacity at “11 Zoom”.  This layer certainly adds texture to the map and embellishes the mountain areas; however, when you zoom all the way in at Scale 11 and just want to see the pure Imagery it disappears.  Take note that the Hillshade layer also covers the Ocean and Bathymetry layers and there is more on that later.

Vector Tile Style Editor settings for the Vector Hillshade layers.
The Vector Hillshade gives shadows to this area of the Alps like they were shaded by hand.

Land: The Land/Not Ice layer has highly customized opacity.  It starts off at the global scale as a sold white.  Then as you zoom (and you want to see more of the imagery) the opacity lowers until at Scale 18 it is at 0%. Using the land layer to soften the imagery is a good way to get the best of both worlds.

Vector Tile Style Editor settings for the land layer.
Creating a land layer that changes dynamically as you zoom in can reduce the visual pull of the imagery while still allowing it to be present.

Vegetation and Land Use:  These were all treated with varying shades of green.  Their opacity adjusts as you zoom in and out of the map.  This layer starts to come on very slowly at Scale 5 by design.  If it came on any earlier it would be too distracting. Its main purpose for this map is to tint the natural and forested areas with more green.  This adds a bit of drama especially in the mountainous areas.

Vector Tile Style Editor settings for vegetation and park layers.
This forest in Slovakia looks like it could have been painted with watercolors.

Contours: These were probably the trickiest of the group to wrangle.  The color needs to stand up to the imagery no matter where you are on the earth, so a dark brown was used that gets even darker as you zoom in. The stroke size was adjusted as well so that they are 1.0 moving to 2.5 to 3.5 pt depending on what scale you are.  There is also a heavy blur of “2” set for the lines so that they appear on the map more organically.

Vector Tile Style Editor settings for the World Contours layer.
Mt. Fuji is a classic example of a stratovolcano. The contours help to amplify its shape, it almost appears as if its rising out of the image.

Ocean: Let’s see what it looks like without any additional layers.

Vector Tile Style Editor showing the ocean without any styling applied.

While absolutely beautiful, I can’t stop looking at it because of that.  Let’s tone it down a bit so it’s part of the story and not the entire story.

Let’s start along the coasts.  For the areas surrounding the land (Depth 1 Bathymetry) a medium blue was used along with opacity starting at 30% going down to 10%.  Now these areas pop a bit, but not too much.

Vector Tile Style Editor settings for Ocean Bathymetry Depth 1.
Look at the areas around Indonesia, Seychelles, and Madagascar where you get a lightness around them.

Bathymetry: This will be a surprise, but the bathymetry is actually gray in color with only 10% opacity. Remember I mentioned earlier about the Hillshade classes covering the Ocean and Bathymetry layers?  The first three (Hillshade Shadow Base 1, Hillshade Highlight Light 1, and Hillshade Shadow Light 1) do faintly play a role here.  This affects the visualization.  However, by adding in the gray over it (which is tinting the bathymetry darker) it allows for more of a range of color. Look how the palette is without the imagery:

Vector Tile Style Editor settings for the Bathymetry layers, highlighting Bathymetry Depth 2.
Now here it is along with the imagery. This 10% sequential gray palette tones out even the highest values of the imagery and allows the texture of the bathymetry to still come through.

Now here it is along with the imagery.  This 10% sequential gray palette tones out even the highest values of the imagery and allows the texture of the bathymetry to still come through.

Vector Tile Style Editor settings for Bathymetry Depth 2 and showing how it looks draped with imagery.
The 10% gray helps to soften the imagery and allow the deepest parts of the ocean to look like they are sinking into an abyss.

Lakes: These need to behave similarly to the ocean but since they are most often surrounded by land, they got a slightly lighter blue with 100% opacity. This is another way to adjust your layer and how much presence it gets on the map.  It starts at 100% and then by Zoom 13 it disappears.

Vector Tile Style Editor settings for the Lakes layers.
The lakes here use a transparency functionality that’s set on the actual color.

The final step is to open up an ArcGIS Online webmap.  Replace the default basemap with this customized Vector Tile Layer along with World Imagery.  Let’s bump up the Imagery layer with the Saturate Effect by setting that to 130.  This gives it a bit more richness and helps to play off the contours.

Webmap showing where to find the Layer Effects to saturate the World Imagery.

Want to bump it up even more?  Add in World Hillshade and use the Blend Mode Multiply and give it 25% Transparency.

Webmap showing where to find the Blend Mode Multiply and how to apply transparency.

Here’s the webmap and it contains bookmarks of the places shown in this blog. There is also a final vector tile you can retrieve to compare with your own, and also the code used in this blog, shown in detail.

Another idea not shown here is to add the layers to a 3D Scene and then really have some fun…like how Halfway Hollow in Utah looks.

Terrain is accentuated by the contours in a 3D Scene of Halfway Hollow in Utah.

Resources

Since the final product was displayed at the beginning of this blog article it only seems fitting to end with resources, of which there are a ton!

Everything you need to know about Esri Vector Basemaps from legendary basemap cartographer Andrew Skinner.  Below are three blog articles that expand on many of the things discussed here.

Humorous video by Tommy Fauvell and John Nelson about Advanced Vector Tile Style Editing as well as another blog article by the pair that digs into what we talked about here.

Documentation about the Vector Tile Style Editor and here’s one about creating your own vector tiles which you could then use in the Style Editor!

Please reach out to me with comments or questions!

About the author

With over two decades of GIS experience Emily has mapped elephants in Thailand, wildlife poachers in the Republic of Palau, land use related issues around Yosemite National Park, and active wildfire incidents for the State of California. Presently she is a Senior Product Engineer and Cartographer with the ArcGIS Living Atlas of the World where she styles and designs layers, maps, and apps with the Environment Team. When not making maps, she is a true geographer and loves traveling with her family.

Connect:
0 Comments
Inline Feedbacks
View all comments

Next Article

Multi-Scale Contour Styling in ArcGIS Pro

Read this article