How do you achieve an old-school look & feel for a basemap? What colors, fonts, or features define a retro or vintage map style? If you're wondering how to design a retro map in MapTiler Customize, keep reading!
Map color palette
The first thing you should focus on is the choice of colors. My tip is to start from deeper zoom levels and then adjust as you go up. I started from the Bright map style and zoomed in so that I could see buildings. Retro maps typically use pastel colors: variations of brown, beige, and dusty pink to imitate the aged and worn feeling.
To create additional colors in the same style, I 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 I started from is quite rich, so I decided to get rid of 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, I went into the Amenity Data tab and included only bank, cemetery, library, park, post, and town_hall classes. I also removed all icons except for the star in Capital City labels and the circle in City labels.
Fonts and labels
What's typical for old-looking maps is the use of Serif fonts to imitate the look of traditional typefaces from the age of Johannes Gutenberg. In MapTiler Customize, you can choose from multiple Serif font families: Cinzel, Libre Baskerville, Merriweather, Noto Serif, PT Serif, and Volkorn.
Next, you should think about 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.
I used 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, I used 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 different kinds of labels, I also leveraged 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, which I did for Continent, Country, Capital city, State, Island, and Place labels.
For better readability, I added 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
Many old maps are easily recognizable by their imperfect paper texture and patina, indicating usage over the years. This feeling can be mimicked 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.
I tried to keep it simple with icons, as there are usually not that many on vintage maps. It is more common to have unique drawings alongside the actual map, but that would take a lot more work in Inkscape! I kept only star and circle icons for Capital cities and Cities. I recommend you keep these kind of icons 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. I toggled off the Convert to customizable icons (SDF sprite) option to have the icons rasterized.
For the pattern styling, I created two additional layers: The background pattern on top of the Background and the Water pattern on top of the Water layer and made their opacity 5%.
Retro map
Now we have a styled Retro map! Check out your favourite locations or just zoom around and enjoy the blast from the past.
Comments
2 comments
Hi Petra,
Would it be possible for you to put the JSON code to the map somewhere? I found that certain colors require the changes to be done via coding.
Thank you
Malt
ps. Happy to communicate in other methods, I do not plan to use this map in any public form
Hi Malt,
happy to share the style JSON and sprites. I will reach out to you by email.
Petra
Please sign in to leave a comment.