Cartography on the web has always been several steps behind desktop. With fewer options for symbology and the myriad of stylistic limitations that come with presenting data in a dynamic format, giving your web maps more character has always been a tricky endeavor. Luckily, the ArcGIS Vector Style Editor allows users to easily customize basemap data to improve both its appearance and performance within their web maps. Read this blog post to learn about three techniques you can apply when customizing a basemap using the ArcGIS Vector Tile Style Editor.
One of the most defining visual elements of a web map or application is the basemap. Sometimes you may need to go beyond the default 14 basemaps provided on ArcGIS Online in order to achieve a style that is better suited to your map or application’s overall theme. The ArcGIS Vector Tile Style Editor gives you the ability to implement your own custom cartography while still making use of Esri’s up-to-date vector basemap data.
Just before the 2019 FIFA Women’s World Cup, I created the Goals Across the Globe: Christine Sinclair Story Map Journal that presents the location of each goal Christine has scored during international play as she was set to become the all-time leading scorer in international soccer. I wanted the basemap to be very simple, but stylish and a little different from the default options. Here are three techniques I implemented while creating this basemap using the ArcGIS Vector Tile Style Editor.
Goals Across the Globe: Christine Sinclair
Simplify the base layer
Depending on what scale your basemap is being presented at, your audience likely doesn’t need to see every single layer available within the basemap. The Style Editor allows you to turn off excess information that is not adding value by going through the Edit Layer Styles menu and changing a layer’s visibility properties:
Changing a layer’s visibility property
You can also pick a simplified style found under the Base tab of the Style Editor’s start-up menu. In my example of the Goals Across the Globe: Christine Sinclair Story Map Journal, I was only concerned with showing users the locations of her goals at a small scale where global or national map views would suffice, not at a large scale where city or neighbourhood details would be expected. Since layers showing urban features like roads and buildings were not needed, I was able to use the Human Geography Base style, which is essentially just land and oceans:
Selecting the Human Geography Base style
I changed the colour of the land and background layers to be dark and light red, trying to achieve something in the vein of Team Canada’s red uniform:
Changing the appearance of the Human Geography Base style
The result is a simple base layer showing land and water without any unnecessary information to clutter the map or slow down its performance.
Add a texture layer
You might find yourself wanting to add a little character to your base layer; maybe you want it to look like an old, weathered paper map or a crinkled sheet of newspaper. The Style Editor allows you to create a texture-based layer by adding your own .png files within the Edit Icons & Patterns menu.
If you can’t make a transparent pattern yourself or you don’t have access to a graphics professional within your organization, try to find a free-use pattern online that would be suitable for your map. Transparent Textures is a website I’ve used to find a variety of old, weathered paper patterns.
After starting with a simplified style found under the Base tab of the Style Editor’s start-up menu – like Human Geography Base – the first thing I had to do was to save the basemap. Once saved, the Add button within the Edit Icons & Patterns menu became activated and I was able to upload a pattern by giving it a name as well as previewing how it will appear:
Edit Icons & Patterns menu
Previewing an icon/pattern file
Once my pattern had been uploaded, I went back to the Edit Layer Styles menu and clicked on the background layer from the layer list. I selected my pattern with the Pattern drop-down menu under the Appearance heading:
Selecting a pattern
I also turned off the Land layer found under the Natural layer on the layer list and saved my edits:
Changing the land layer’s visibility property
The result here is a layer showing texture and nothing else. This layer can be added to a web map and placed above the land and water base layer in the table of contents with its transparency increased in order to make it see-through.
Optimize a label/reference layer
A unique labelling style can help in making text elements match the appearance of your map’s overall theme. The Style Editor allows you to not only change the font family and colour of your labels, but also allows you to turn different label categories on or off at different scales depending on what needs to be shown on your map.
Keeping with my example of the Goals Across the Globe: Christine Sinclair Story Map Journal, I wanted to use a font that was stylized to be a little sportier and clearly visible in red. First, I selected the Human Geography Label layer from the Label/Reference tab of the Style Editor’s start-up menu:
Selecting the Human Geography Label style
Then, I changed the Font to Timmana Regular. For colours, I changed the Label Text to red and the Label Halo to gray. I also increased the size of the font slightly using the Larger button under Label Size:
Changing label properties
Since I am showing users the locations of Christine’s goals at a small scale, I do not need to have labels for features like rivers, parks, roads or buildings. Using the Edit Layer Styles menu, I went through each category of layers and turned off anything unrelated to place names at a global or national scale:
Changing a group of layers visibility property
Like my base layer, the result here is a simplified reference layer that is free of any unnecessary labels to clutter the map or slow down its performance. These new labels can be added to a web map and placed above the land and water base layer in the table of contents.
Note: Although not part of the basemap, the final web map also contains the World Countries (Generalized), USA States (Generalized) and Provinces & Territories of Canada layers that were added from the ArcGIS Online Living Atlas. The goal locations layer was symbolized with a free-use cartoon image of a soccer ball from PNG Arts.