---
title: "How to make a picture-inspired map | Guides | Map design"
description: "Color-tone your maps to match any selected picture."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# 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](https://docs.maptiler.com/guides/map-design/editor/):

Warning

Please note that this tutorial uses an [older generation of MapTiler maps](https://docs.maptiler.com/guides/updates/#2025-11-new-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:

-   [dots.zip](./dots.zip)

## 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](https://www.favorit.cz/technical-data)) similar to what my grandfather used to ride.

![favorit\_bycicle.png](./20526168729489_47b1a4c84d.webp)

To extract the colors, there are a number of tools, such as [Image Picker](https://coolors.co/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](./20532661617681_12105fefb3.png)

## Modify colors for map

Sometimes it happens that when you assign the colors to the map features in [Map Designer](https://cloud.maptiler.com/maps/editor), 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](https://cloud.maptiler.com/maps/dataviz-v4/) 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](./20529967433745_a76b3b0f94.webp)

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](./20529973358225_1a8455eeb7.webp)

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](./20529973366289_1b92904b1c.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](./20529973369361_9d35b686b6.webp)

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

![ot\_water.png](./20529967471377_98a6f2383c.webp)

## Use your map

When done, you can [publish](https://docs.maptiler.com/guides/map-design/how-to-publish-a-map/) your custom map and share it with the world. The options are the same as when [using a ready-made map](https://docs.maptiler.com/guides/using-map/).

Tip

The easiest way is to add the map to your website [as an iFrame](https://docs.maptiler.com/guides/using-map/iframe/).