How to make a retro map

In this tutorial, you’ll learn how to create this retro map using our visual map editor Map Designer:

Source files

To create this exact map, you’ll need these files:

• retro_icons.zip

Color palette

For a vintage-feel map, you need to select the right colors, fonts, and features. Choice of colors is key as retro maps typically use pastel colors: variations of brown, beige, and dusty pink to imitate the aged and worn feeling.

Start from deeper zoom levels and then adjust as you go up. This example starts from the Bright map style, zoomed in so that the buildings are visible.

To create additional colors in the same style, use different opacity or lightness values.

Map features

The next step is the selection of features that should be included in the map. The Bright map style is quite rich, so remove a few layers:

• Sand
• Water offset
• River tunnel
• Tunnel path
• Ferry
• Ferry labels
• Oneway road
• Highway shields
• Building top
• Transport
• Shopping
• Sport
• Food
• Drink
• Other POI

To reduce the number of POIs further, go to the Amenity Data tab and include only the bank, cemetery, library, park, post, and town_hall classes. Then remove all icons except for the star in Capital City labels and the circle in City labels.

Fonts and labels

Old-looking maps typically use Serif fonts that imitate traditional typefaces. In MapTiler Map Designer, you can choose from multiple Serif font families: Cinzel, Libre Baskerville, Merriweather, Noto Serif, PT Serif, and Vollkorn. 

Next, use different font types to differentiate between labels or to create a hierarchy. For more important features, use Bold types; for emphasizing a difference, use Italic. 

This example uses the following Merriweather types for label layers:

• Bold: Continent, Country, and Capital city labels
• Regular: City, Island, Town, and Road labels
• Italic: State, Place, Lake, Sea, and Ocean labels
• Light: Village labels
• Light Italic: River labels

For POI layers, use Light Italic up to Zoom 16, then from Zoom 16 a classic Italic so that the labels are readable on top of the Buildings.

To differentiate between kinds of labels, adjust the letter spacing.

• 0em (none): Town, Village labels
• 0.1em: Lake, Sea, Lakeline, River, Island, Airport labels, and all POI layers
• 0.2em: Capital city, State, and City labels
• 0.3em: Continent and Country labels
• 0.4em: Road labels

You can also transform some of the labels to uppercase, for example Continent, Country, Capital city, State, Island, and Place labels.

For better readability, add a halo to all labels, using #F9F1DC color, 80% opacity, width ranging from 1 to 1.5px, and a bit of blur.

Patterns and icons

Old maps often show an imperfect paper texture and patina. You can mimic this by creating an SVG seamless dot pattern designed in graphic software such as Inkscape. 

The key here is not to make all the dots the same. You can start from perfectly symmetrical dots and then distort them randomly. The background needs to be transparent.

Keep icons simple, as vintage maps usually don’t have many. This example uses only star and circle icons for Capital cities and Cities, around 15x15 px in size.

Compress all files into one ZIP and upload it to your map. The Icons upload is available in the menu in the top-right corner. Toggle off the Convert to customizable icons (SDF sprite) option to have the icons rasterized. 

For the pattern styling, create two additional layers: a background pattern on top of the Background layer and a water pattern on top of the Water layer. Set their opacity to 5%.

Use your map

When done, you can publish your custom map and share it with the world. The options are the same as when using a ready-made map.