Create Beautiful Maps with Felt Backgrounds

Felt makes it easy to customize your map design. This edition of Felt Explained shows how to make your elements pop off screen by changing the background imagery.

When you first open a new map project in Felt, you'll get the default map background. The understated features provide a suitable canvas to layer data on top of, while subtle colors add visual interest.

But different maps often require different backgrounds, Felt provides a few options for you. Change the basemap via the Background icon on the top right-hand side of the menu bar.

There are two main options: the default, and satellite. The satellite background is much darker, and the main user interface elements automatically swap to match. You may also notice all of the labels on the map automatically switch so that they still contrast nicely, too.

Take a closer look at the New York label on the default background. It has black text with a white stroke. Compare that to satellite background, where the label is now white text with a black stroke. Felt automatically changes the stroke and the fill to make sure that map elements remain legible.

Now take a look at a thematic map visualizing the impact of Hurricane Sandy available in our map Gallery. The map has data layers showing the areas inundated when the storm hit New York City in 2012, and shows low-lying evacuation zones. If you have a Felt account, you can follow along by duplicating the map (Felt > File > Duplicate to my maps). If you don’t have an account, sign up now, and then follow along.

Notice that the default background displays parks and other open spaces with a shade of green similar to the colors used to show evacuation zones. Since this can be confusing, it’s best to use a background that doesn’t compete with the data. Felt offers several variations of the background map, including a minimal monochrome version suitable for combinign with thematic data. Click on the Background icon in the right-hand side of the menu bar, select the overflow menu (…), and then light to switch from the default map to the minimal version.

That removes the park colors and gives a nice clean monochromatic background. For another variation, switch to the dark background. Very nice, but the background now competes for visual attention with the data layers — better to stay with light.

Zoom out to show more of New York City, and you might find the labels start to become cluttered. You can turn off labels from the background menu, resulting in a nice clean map ready for custom annotation.

A cool aspect of Felt’s backgrounds is a concept called “sandwiching”. Sandwiching is a way to bring some elements of the background into the foreground, placing them above a data layer.

In the zoomed-in view of Lower Manhattan above, notice that despite being part of the background, roads and water are displayed on top of the evacuation zone layer. The data are sandwiched between elements of the base layer.

You can adjust sandwiching by changing the Position setting in the Felt style menu, which appears when you select a data layer. Changing the hurricane evacuation zones layer to Above water and roads obscures parts of the background map that are helpful for context.

In other map-making and GIS software sandwiching is usually a manual process of splitting data into different parts and positioning them in the right order. With Felt it’s quick and easy to overlay elements of the background on top of data, resulting in a cleaner and more understandable map.

If the background options provided by Felt don’t meet your needs, you can connect custom backgrounds via URL. The Where To Find Custom Map Backgrounds page on Felt’s Help Center lists several options, and details how to use them. Felt supports custom map backgrounds via web-based map services that support the XYZ map tile format — OpenStreetMap, MapTiler, Mapbox Studio, ArcGIS servers, etc.

Here’s how to add a background from the web. First, copy the URL of the tiling service you’ll be using. This is the link for OpenStreetMap, for example: "https://tile.openstreetmap.org/{z}/{x}/{y}.png" Click on the Background icon in the menu bar, then the overflow menu (…), and select Add from Url…

Paste the link into the Tile URL field to bring up a preview. By default the new background will have a title generated from the URL, but you can change it if you need to. Under Additional settings you can specify the attribution (which is required by some sources, such as OpenStreetMap) and flip the Felt UI Color between Light and Dark.

Here’s what the OpenStreetMap background looks like paired with the Hurricane Sandy impact map. Notice how the OpenStreetMap water and roads appear below the data — custom basemaps don’t support sandwiching. It’s also possible to create custom styles in Mapbox or MapTiler and connect them to Felt.

Finally, if you want to go super minimal or don’t need a basemap at all, you can even set the background to a solid color. Simply click on the Background icon in the menu bar, then the overflow menu (…), and select Add solid color… This will bring up a color picker interface — click the eyedropper tool on the color you want and it will fill the background.

Hopefully this gave you a good idea of how background maps work in Felt, and maybe provided some inspiration for your next project. If you haven’t already, sign up, check out the Hurricane Sandy map in the Felt gallery, and duplicate it so you can jump in and play around with it.

If you liked this tutorial and would like to learn more, follow us here on LinkedIn or visit the Felt Explained playlist on our YouTube channel, which contains a growing series of videos exploring Felt’s features.

Felt lets you quickly visualize your data on a map and share it with a single link anyone can view. Whether you’re a GIS industry pro or brand new to maps, we are the tool for you!