Map styled like a picture

Do you lack inspiration for your map colors? Or do you have a cool photo with a great color palette? Nowadays, maps are styled in various ways. So how to turn your favourite picture into a map? Ask no more, you can take inspiration from this how-to.

Extract color palette from an image

First things first, choose your picture. Sunset at sea, urban scenery, or it can be even a black & white photo! As for me, I chose this picture of Favorit bike (source: https://www.favorit.cz/technical-data). Favorit was a Czechoslovak brand of bicycles. Its models were popular, especially during the Soviet era, even my grandfather had one!

To extract the colors, there are a number of tools, such as Image Picker from Coolors, or you can do it yourself in Inkscape using the Color Picker. This is the color palette I got from this image.

Modify the color palette for the map

Sometimes it happens that when you assign the colors to the map features in Customize, the map doesn't look that good. You either need to play with the hue and contrast or add more colors. The key here is to try different combinations and keep the color theory in mind. If the extracted colours suit the map right away, that's a win.

I started with the Dataviz map style. For this map, I realized I needed to modify and add a bunch of colors. Here are some of the changes I made:

• modified the light grey color to beige for the background
• gave the old rose color a bit more red for the road network and borders
• added some dark colors for outlines and shadows
• added light green for landcover
• added dark purple for buildings

Just so you can quickly replicate this, here is the list of all colors and layers in my map.

• #F8EBD3: Background, Water labels, Bridge, Pier road, Outlines of Administrative labels
• #B2D3A6: Landcover, Forest (with 15-35% opacity)
• #7DB0AE: River, Water
• #364449: Water shadow
• #C74D57: Railway, Road network, Railway tunnel, Tunnel, Tunnel path (all tunnels with 70% opacity), Aeroway, Residential (with 20% opacity)
• #D9D9D9: Tunnel outline
• #FFFFFF: Railway dash, Path outline, Railway tunnel dash, Fill of Road labels
• #FBF8F4: Pier
• #483519: Road network outline
• #000000: Outline of Road labels, Fill of Administrative labels, Building shadow
• #E5E1BD: Cemetery
• #463E74: Building top
• #AB3640: Border
• #545454: Fill of State labels

Finetune details

Now it's time to adjust fonts, text sizes and add some patterns. As for the font, I decided to switch to Frutiger Neue Condensed Medium, and I changed the Letter spacing (under Advanced text properties). Continent and Country labels were changed to 0.2em and City labels to 0.1em. I adjusted sizes for all Administrative labels by adding +2 to +3 points on each zoom using the JSON Editor. I also increased the Outline width to 2px. 

Then I thought some polka-dot patterns might suit the map as it gives a bit of a retro vibe. For a seamless pattern, create a single dot in Inkscape (or other graphics software) and position it in the middle of the canvas. To have bigger dots, increase the size of the dot but also adjust the size of the whole canvas. 

Once you have your dots ready as SVGs, ZIP them and upload them to your map (Close Customize > three dots > Symbols). I added the dots to water and buildings. In order to do this, you need to duplicate the layers and add the patterns to the layer above.

 Both my patterns are black, but a nice trick to have subtle dots on water is to add opacity of 10 %.

If you don't feel like creating the patterns yourself, you can find them attached in this article.

And that's it! We now have a map with a color palette inspired by a picture.