For AI agents: a documentation index is available at /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:
Warning
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
Start with a photo that has a good color palette, such as a sunset at sea, urban scenery, or even a black & white photo. This example uses a picture of a Favorit bike (source: https://www.favorit.cz/technical-data).
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 extracted from the image.
Modify colors for map
When you assign the colors to the map features in Map Designer, the map may not look right straight away. Adjust the hue and contrast or add more colors, try different combinations, and keep the color theory in mind.
This example starts from the Dataviz map style, with these color changes:
- 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
To replicate the map, use this list of all colors and layers:
- #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
Next, adjust fonts and text sizes, and add patterns. This example switches the font to Frutiger Neue Condensed Medium and changes the Letter spacing (under Advanced text properties) to 0.2em for Continent and Country labels and 0.1em for City labels. The sizes of all Administrative labels are increased by +2 to +3 points on each zoom using the JSON Editor, and the Outline width is set to 2px.
Polka-dot patterns give the map a retro touch. For a repeating 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 Map Designer > three dots > Symbols). This example adds the dots to water and buildings. To do this, duplicate the layers and add the patterns to the layer above.
Both patterns are black. To make the dots on water subtle, set their opacity to 10%.
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.
Tip
The easiest way is to add the map to your website as an iFrame.