Using the Vector Tile Style Editor: Strategies for Rapid Web Map Designing

Introduction

In my year and a half at Esri, I’ve learned a great deal. Coming into the GIS world with a math and computer science background, adapting to the geospatial technology world has been a bit challenging. I’ve learned many new things, and in this article, I will share one of the cool tricks I’ve picked up for creating more visually compelling mapping applications.

Let’s dive into the exciting world of map styling, where web development meets cartography. This is the first in a series of blogs I’ll be writing, designed to empower JavaScript developers with the magic of custom map creation. Today, we’ll scratch just the surface and explore the Vector Tile Style Editor’s (VTSE) Quick Edit option — a fast and easy way to customize your mapping applications.

Getting Started

To begin, access the Vector Tile Style Editor (VTSE) at vtse.arcgis.com. With a simple login to your ArcGIS account, you’ll be presented with an interface showing any previously customized vector tiles. To get started, press the green “New style” button in the top right corner. You’ll then choose a basemap from the various ArcGIS and OSM options. This will serve as your foundational canvas, the base starting point for how your map looks.

After selecting a basemap, the VTSE interface will open up, showing one large map with three mini-maps beneath, along with many styling options on the left-hand side. We’re going to focus on one piece of the styling panel, the very first option, Quick Edit.

Quick Editing in VTSE

Designed for both ease and efficiency, Quick Edit offers a range of options to craft your map without diving into the intricate complexities of different features, sprites, and more. Within this playground, you have many general styling options to choose from. Let’s go through each of them.

Color Theme

The first dropdown contains five different color schemes to select for your map’s style. Color schemes are systematic ways of choosing colors that work well together to create aesthetically pleasing designs. These color schemes are as follows:

• Monochrome: Focuses on a single color, utilizing shades, tints, and tones of that color. It is simplistic and elegant, often used to create a minimalistic look.

• Analogous: Consists of colors that are next to each other on the color wheel, usually comprised of one dominant, one supporting, and one complementary or contrasting color. The scheme is used to create harmonious, cohesive, and serene designs.

• Triadic: Involves three colors evenly spaced on the color wheel, forming a triangle. It is vibrant and playful while maintaining balance.

• Complementary: Made up of two colors that are opposite each other on the color wheel. This scheme creates high contrast and vivid looks but can be overwhelming if overused. It’s effective for drawing attention and creating a striking visual impact.

• Compound: A variant of the complementary scheme, using a base color and the two colors adjacent to its opposite on the color wheel. It provides strong visual contrast but with less tension than complementary, making it more versatile.

Basemap Layer Groups

There are six different layer groups that represent various features of the physical and human-made environment. Below is a general overview of each of these categories:

• 🗺 Land: Represents the earth’s surface area not covered by water, including ground surfaces like forests, urban areas, fields, and deserts. This layer sets the foundational canvas of the map, providing the stage for other features to be overlaid.

• 💦 Water: Includes all bodies of water, such as rivers, lakes, oceans, and streams. The water layer is important for giving graphical context to define the landscape and influence the layout of features such as roads and boundaries.

• 🛣️ Roads: Encompasses all types of throughways, containing features like highways, main roads, minor streets, and paths. Roads are critical for depicting connectivity within and between regions, often serving as the primary focus in routing.

• 🛂 Boundaries: Political, administrative, and other demarcating lines such as countries, states, provinces, and property lines make up this layer. Boundaries are key to understanding jurisdictional and geographic divisions.

• 🏨 Buildings: Consists of individual structures and built-up areas, depicting residential homes, commercial, and public buildings. This layer adds depth and a three-dimensional context to the map.

• 🌳 Nature: Incorporates natural features, such as forests, parks, mountains, and grasslands. The nature category offers insights into land use, natural habitats, and environmental conditions.

Once you’ve finished styling the basemap layer groups, you have the ability to turn on the “Recolor icons & patterns” option. Note, however, that you will need to save the style before activating this feature.

Label Styling

There are five options for styling labels in the Quick Edit panel. These allow you to manipulate how text elements appear on the map. The five label options are:

• Label colors: Set to the default of ‘Use selected colors’, when you click here, you’re given the option to ‘Pick label colors’, which allows you to change the color of the text on your map. There are two specific parts to changing label colors: label text and label halo. The label text color comprises the label itself, dominating the text’s look. The label halo is a border or glow around the text to help it stand out against any backgrounds.

• Label contrast: Refers to the difference in color and brightness between the text and the map background. This option can only be changed when using the default label colors. The four contrast categories are ‘Low’, ‘Medium’, ‘High’, and ‘Maximum’. The lower the contrast, the more difficult it becomes to distinguish between the text and background colors.

• Language: Select the language in which the labels are displayed. This option is most effective in a localized area for the chosen language. Otherwise, some place labels may not be affected by the language change.

• Font: Controls the typeface for the map labels with this dropdown. Choose from various font options with a range of typefaces from serif and sans-serif to more decorative styles, as well as font weight and style (e.g., italic).

• Label size: Controlled by incremental buttons, you can click the ‘Smaller’ or ‘Larger’ buttons to gradually vary the size of the labels on the map. Continuously clicking will increase or decrease the text size.

These different label stylings can be used to provide better visibility and integration with the map’s overall design. After styling your labels, ensure they are clear, readable, and aesthetically pleasing for maximum accessibility.

Other Options

In the Quick Edit panel of the VTSE, additional options involve manipulating road size and randomizing your colors.

• Road width: Similar to ‘Label size’, you can customize the thickness of the roads by continuously pressing the ‘Narrower’ or ‘Wider’ button. Adjusting the road width can influence not only the map’s readability and visual appeal but also its functional clarity.

• Randomize: This ‘randomize colors’ option provides a way to quickly change the color scheme of all the map’s layers at once. This feature is useful for exploring and discovering new visual styles without manually picking the layer colors. It can be quite useful in the initial phases of map styling, leading to potentially new creative findings.

Conclusion

The Quick Edit panel within the ArcGIS Vector Tile Style Editor serves as an excellent stylistic sandbox for web developers new to map styling. It makes personalizing maps fun and easy, while effectively conveying the desired visual message.

Stay tuned for my future articles, where we’ll div e deeper into the advanced styling features of the Vector Tile Style Editor, learn how to use these custom styles in a mapping application, and explore Photoshop-like effects, among other topics.

This article was written by Courtney Yatteau, a Developer Advocate at Esri. The opinions in this article are solely Courtney’s opinions and do not necessarily represent the postings, strategies, or opinions of her employer. If you have any feedback, please like and/or comment. Also, if you have any questions or comments that you’d prefer to send privately, you can contact Courtney through LinkedIn, Twitter, or email. If you’re considering a career switch, looking to get into tech, or curious about what it’s like to work at Esri, then please stay tuned for my future posts! You can also check out Esri’s careers page or this video for more information.