Using the Vector Tile Style Editor: Custom Colors, Fonts, Icons, and More

In my previous article, we explored the basics of the ArcGIS Vector Tile Style Editor (VTSE) using its Quick Edit feature. Let’s dive deeper into the VTSE’s capabilities with additional features and a practical example of enhancing the map and its surroundings for Sudhouse, a popular bar spot in Washington, DC. Our goal is to demonstrate how these features can transform a standard map into a visually appealing component of your web application.

Choosing the Right Basemap 🗺️

Basemap Details

Start customizing your mapping applications by logging into the VTSE, pressing ‘New style’, and then selecting a basemap option. These basemaps include hundreds of choices in the ArcGIS Living Atlas of the World. If you’re overwhelmed by the options, some good starting basemaps are the ArcGIS styles and Esri’s copies of some OSM styles.

Applying Basemaps in Urban Settings

For urban environments, like the city bar I’ll focus on in my example throughout this article, the Open Street Map Navigation basemap is ideal due to its detailed depiction of streets and buildings. Therefore, for my Sudhouse bar example, I have chosen the OSM Navigation basemap to enhance the visibility of local streets and the uniqueness of building identifiers around the bar.

Customizing Layer Styles 🌐

Layer Styles Details

The ‘Edit Layer Styles’ tool provides deep customization of map layers, offering precise control over their visibility, color settings, and formatting. Dynamically adjust colors using gradients or single values and modify layer outlines with changes in color, patterns, and opacity. Additionally, text appearance can be enhanced with adjustments to font style, color, halo, size, placement, and orientation.

Real-World Layer Styling: Making Streets Pop

While searching for and zooming into the Sudhouse area, I used this feature to modify the appearance of the nearby roads. In the GIF below, I selected a distinctive color for the primary roads to make them stand out. Similarly, I adjusted the text size, text color, halo color, and font style to ensure that street names are easily readable.

Color Editing 🎨

Color Details

The ‘Edit by Color’ feature streamlines the process of maintaining color consistency across your map, making it ideal for aligning with specific visual themes. This feature replaces all instances of one hexadecimal color value with another that you choose.

Transforming Colors

After setting a distinctive color for roads near Sudhouse, I used ‘Edit by Color’ to find that specific color and then selected a new color to apply to all elements with my chosen hex code, aligning them with my new color scheme. To emphasize this change, I changed the road color from a light pinkish hue to a bluer one.

Editing Icons and Patterns 📍

Icon & Pattern Details

The VTSE’s Sprite Editor allows you to change, add, or remove sprites and patterns, essential for effects like textured patterns and point symbols. Adjust the color tint of sprites to fit your map’s color scheme or upload custom icons for significant visual improvements. Please note: you must save your custom style before editing any icons or patterns.

Custom Icons in Action

For Sudhouse, I’ve decided to replace the standard amenity point/bar icon. The standard symbol provided is a basic white and faint yellow beer mug, but I want to replace it with something brighter, more colorful, and fun. After finding an icon and downloading it, I can simply replace the standard mug with my custom one for Sudhouse and all other locations with the same ‘amenity point/bar’ symbol.

Directly Editing the JSON 👩‍💻

JSON Style Details

For developers who prefer more control, the ‘Edit JSON’ function allows direct manipulation of the map’s style through JSON scripts. This feature supports focused modifications, providing instant feedback within the VTSE interface. For larger or offline edits, the JSON document can be downloaded, edited externally, and then uploaded to update the map’s style, integrating complex styles into development workflows.

Hands-On JSON Styling

When I first opened the JSON editor, the amount of style text was a bit overwhelming. By clicking on a map feature with the JSON editor open, the ‘Edit layer styles’ option becomes available, allowing access to that specific feature. Clicking on ‘Edit JSON’ again then directs me to that feature in the JSON style, where I can make edits. As demonstrated, I’ve chosen to edit the OSM building/fill layer by changing the building color and the OSM address area/label/number/name layer by adjusting the font size of the building number, then updating the style in the preview.

Conclusion

The VTSE offers robust tools for creating personalized and functional maps. By understanding and utilizing its full range of features, you can transform standard maps into tailored visual stories that resonate with your audience, regardless of the location. Whether styling a local café in Paris or a boutique in Tokyo, these tools empower you to bring a unique perspective to any map.

Stay tuned for my future articles where we’ll learn how to use these custom styles in different mapping applications and explore Photoshop-like effects, among other styling 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.