How to make a picture-inspired map

In this tutorial, you’ll learn how to create a map color-toned to match a selected picture using our visual map editor Map Designer:

Please note that this tutorial uses an older generation of MapTiler maps and the described workflows might not be accurate anymore. We recommend to use this guide as a source of design tips and tricks from our cartographers rather than relying on detailed step-by-step instructions.

Source files

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

Get image color palette

Do you have a cool photo with a great color palette? Sunset at sea, urban scenery, or it can be even a black & white photo! I chose this picture of a Favorit bike (source: https://www.favorit.cz/technical-data) similar to what my grandfather used to ride.

favorit_bycicle.png

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.

Favorit_palette.png

Modify colors for map

Sometimes it happens that when you assign the colors to the map features in Map Designer, 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

color_palette.jpg

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. 

favorit_labels.png

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. 

dot_pattern.png

Once you have your dots ready as SVGs, ZIP them and upload them to your map (Close Map Designer > 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.

dot_buildings.png

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

ot_water.png

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.

The easiest way is to add the map to your website as an iFrame.