New Look for GNOME Maps!
10 February 2024

If you follow me on Mastodon, you’ve probably seen plenty of screenshots of the new map style I’ve been working on. Now that it’s been merged (just in time for GNOME 46!), I think it’s time to give it a proper introduction and explain some of the design decisions I made along the way.

Why a New Style?

The vector renderer in libshumate uses the MapLibre Style Specification format. MapLibre is a widely-used open source library for rendering maps, so there are plenty of existing styles available for it. However, most of them are designed to be basemaps, ideal for displaying data on top of them. They often use muted colors and don’t show much detail, particularly the dark styles. Our use case is different: as a maps app, the style itself is the main focus of the map. It needs to be clear and easy to read while containing all the information people expect from a street map.

Dark mode map of Hamburg, Germany
The Dark Matter style has little contrast or detail, but would look great for showcasing data.

OSM Liberty, the style that the Experimenal Map mode used in 45, wasn’t bad for this purpose. It has icons for many types of places, it uses color to distinguish different types of roads, and it has the detail we need. But it’s not a perfect fit. It has no dark variant, which is an important part of the GNOME platform. It also doesn’t incorporate some newer techniques like localization, highway layering, or complex text formatting. Sure, we could add those features, but at that point we’re basically making a new style anyway.

Besides, I wanted to make a style that’s unique to Maps, to give it a distinctive identity. It should be something we can tweak and improve over time, that’s designed to be the best possible map for our app.

Design Goals

I started out with a few goals in mind:

On a technical level, the style was very much inspired by the OSM Americana project. They have been pushing the limits of what MapLibre can do, and their style is much more than a static basemap. It’s a dynamic, data-driven map that brings relevant information to the forefront with localized names, highway shields, and more. While GNOME Maps looks much different visually, it uses many of the techniques that OSM Americana pioneered.

A map of Japan in OSM Americana, showing labels in both English and Japanese.
OSM Americana shows labels in your native language when available. However, if the local name is in a different script, it's shown under the English name.

One such technique is simply the use of code generation. Rather than being a static JSON document, like many existing styles are, Americana is generated using JavaScript. This allows for much more complex logic, such as the loops that enable correct highway layering.

A map of the High Five Interchange in Dallas, Texas, in the new map style.
It's a bit subtle, but notice how the outlines indicate which road passes over the other. This is the High Five Interchange, a 5-level, 12-story-tall monster of a highway interchange in Dallas, Texas.

Making the Style

I started with the high-level features, like water, borders, and place labels. Without those, it’s hard to even navigate the map. I originally used the same color palette we use for app icons, but many people told me it was much too saturated, so I toned it down quite a bit.

Next was roads, which are the most complex part of the style and took a lot of iteration to get right. They need to be the right width at each zoom level, and the colors should clearly indicate the type of road without the color differences being too extreme. Bridges and tunnels should be indicated, and the labels need to be readable no matter the style of the road. And on top of that, there’s pedestrian and cycle paths, which I wanted to be visually distinct without feeling less important than vehicle roads.

Then there’s buildings, which are a bit simpler. They should be a neutral color, but still stand out from the background. I decided to make them visible, though faint, at zoom level 13. It’s not too useful at that zoom level, but it gives otherwise empty areas a bit of texture. And at higher zoom levels, they’re more prominent.

Landcover was tricky because it adds more background colors to the map. It wasn’t hard to make it look good on its own, but it was hard to make it work with the other features without reducing contrast.

Railways were also important to me. Most other maps don’t show them very prominently, but I think it’s valuable to remind people of their transportation options, and railroad tracks can be useful landmarks. While most maps use gray, I gave them a distinctive pink color. And then to continue the transportation theme, Marcus Lundblad added ferry lines and gondolas. So no matter how you’re getting around, hopefully Maps can show you the way!

Points of interest (POIs), like shops and restaurants, were the last major feature. They required some work on the libshumate side, but now we can use symbolic icons from the Adwaita icon library. Many of the icons I needed were already there, and Jakub Steiner from the GNOME design team made a bunch of new ones for us. The lack of text outlines was a bit of a problem when it came to coloring the icons, but I think I found a good balance for contrast.

Highway Shields

Another awesome feature of OSM Americana is highway shields: the symbols that distinguish different route networks, such as the US Interstate system. Fortunately, most of their work was reusable. I had to port the drawing code to C, but the logic and the SVGs were already there. Thanks again to all the Americana contributors for making this possible!

A map of part of Interstate 90 in South Dakota, showing the highway shield for I-90.
The iconic Interstate shield is a familiar sight to many Americans, and now you can see it on the map too.
A map of part of National Highway 65 near Hyderabad, India, showing its yellow and black shield.
The US isn't the only country with highway shields—the set includes symbols from all over the world. Here's National Highway 65 near Hyderabad, India.

Available in GNOME 46!

The new style is available in the “Experimental Map” mode in GNOME 46 or the nightly flatpak. Give it a try and let us know what you think! Now that it’s merged, bugs or feature requests related to the style can be submitted to the Maps issue tracker.

A screenshot of the layers popover in GNOME Maps, with 'Enable Experimental Map' checked.

The vector renderer has been three years in the making, so I’m extremely excited to finally see the fruit of all my effort!

You can also support my work on Patreon.


Further Adventures in Vector Maps

It's been almost a year since I last posted about maps, so I figure it's time for an update!