MapMaking

Turn any place on Earth into a minimalist map poster or wallpaper. Search a city, pick a palette and layout, drop a pin on the places that matter, and export a print-ready file — free, in the browser, on desktop and iPhone. No account, no watermark.

Open the app →

_{New York · Paris · Tokyo · Rio de Janeiro · Venezia · Amsterdam · San Francisco · Istanbul · Barcelona · Kyoto · Buenos Aires · Milano — every poster above was exported straight from the app.}

Different views

Tilt the camera up to 60° and rotate it to turn a flat street plan into a skyline-style perspective. It works with every palette, layout and size.

_{Manhattan (Slate) · Lisboa (Blueprint) · London (Moss) · Hong Kong (Cyberpunk-inspired)}

Ideas

• A city you love — your hometown, where you studied, the trip you still talk about.
• Where it happened — drop a heart where you met, a home where you live now, and connect them with a journey line.
• Wallpapers — dark palettes like Noir, Tron and Neon at phone, tablet or 5K desktop sizes.
• Gifts and shop listings — export a framed wall mockup, then order the print and a matching frame.

Why I made this

I wanted to create a map, but I couldn't find any tool online that looked the way I liked. So I used Claude to build exactly the tool I had in mind, and to share with the world what it can do.

It's free, simple, and offered as is. Enjoy it!

Features

Posters

• Five layouts: Fade (the map fades into the paper), Block (a colored map panel with left-aligned text), Border (double-line frame), Circle and Heart.
• Text block with title, subtitle, coordinates and an optional tagline. Search fills in the city and country automatically.
• Coordinates as degrees/minutes/seconds, decimal, or "latitude | longitude".
• Six poster typefaces: Montserrat, Jost, Space Mono, Playfair Display, Cormorant Garamond and Barlow Condensed.
• Print sizes A4, A3, A2, 30×40, 40×50, 50×70 cm, square, and 8×10 to 24×36 in, in portrait or landscape, at 150 or 300 dpi.

Map styling

• 27 palettes in three groups: Light print styles (Ink, Pencil, Sage, Fjord, Harbor, Mist, Terracotta, Sepia), Dark wallpaper styles (Noir, Slate, Tron, Blueprint, Ember, Moss, Neon) and 12 Inspired by games (Fallout, GTA V, Zelda, Minecraft, Pokémon, Cyberpunk, Hollow Knight, Pac-Man, Super Mario, Red Dead, Halo, Portal). Each of the 12 colors can also be set by hand.
• Separate on/off and line weight for highways, avenues, connectors, streets, service roads, paths and railways. Optional water, parks, buildings and tunnels, plus glow and edge fade.
• Rotation, a 0–60° tilt and three street-detail levels.

Icons and points of interest

• Add icons at the map center or by tapping the map: map pin, heart, star, home, flag, plane, target or dot. Each icon has its own icon, text and outline colors and an optional label.
• Optional points from OpenStreetMap: stations, cafés and restaurants, nightlife, culture, shops.

Journeys

• Connect your icons with a solid, dashed or dotted line, straight or curved, for "where we met → first home → today" posters.

Print

• Print PDF sized exactly in mm for print shops.

Framed mockups

• Preview the poster framed on a wall (black, oak, walnut or white frame, optional mat, six wall colors).
• Mockup saves that scene for shop listings or social posts.

Frames and prints

• Buy frame (next to Export) opens Amazon with a frame search for your exact poster size, in your country's Amazon store. It is an affiliate link.
• Order print opens MYPOSTER in your country's store (Italy, Germany, Austria, Switzerland, France, Belgium, the Netherlands, Luxembourg, Spain or the US). Export your poster first, then upload it there.

Wallpapers

• Phone, tablet, handheld and desktop sizes up to 5K, with the text on top of the map.

More

• Disguise this place rotates, optionally mirrors and renames the map, so a real city becomes a fictional one. Show real place undoes it.
• Every section has its own reset button (with Undo), and Reset all settings at the bottom of the panel starts over completely.
• My designs saves favourite designs in your browser to reopen later.
• Every setting is stored in the page link, which only keeps what differs from the defaults. Copy link (or Link on iPhone) turns it into a short is.gd link that brings back the exact same design. If is.gd can't be reached, the full link is copied instead.

iPhone

The layout switches to a full-screen preview with a bottom tab bar. Each tab opens its settings as a sheet. Drag to pan, pinch to zoom, and Export opens the share sheet so the image can go straight to Photos. In Safari, Share → Add to Home Screen installs it with its own icon.

iPhones cannot create images larger than about 16 megapixels. Large print formats are scaled down to fit (A3 at 300 dpi saves at 288 dpi), and the app says when that happens. Use a computer for full-size print files.

Using it

1. Search for a city, district or coordinates (for example 45.4642, 9.19), or tap Surprise me for a random city with a random palette, layout, typeface and sometimes a tilted or rotated view.
2. Drag and zoom the map until the framing looks right.
3. Choose a layout, palette, size and text.
4. Click Export or Print PDF for the print file, or Mockup for the framed scene.

Running and deploying

MapMaking is a single static file (index.html, about 1 MB) with no server or account needed. The map engine is included in the file. Map tiles, search and fonts load from the internet.

• GitHub Pages: in the repo, go to Settings → Pages, set the source to the main branch and / (root), and save. The app appears at https://guilhermelimait.github.io/MapMaking/.
• On a computer: double-click index.html to open it in Chrome, Edge or Safari.

On iPhone it has to be opened from a web address, such as GitHub Pages. HTML files opened from Files or iCloud do not run.

Project structure

index.html            Built app: open or deploy this file
src/index.src.html    Source (HTML, CSS and JavaScript)
src/icon-180.png      Home-screen icon
build.py              Inlines MapLibre GL JS and the icon into index.html
screenshots/          Images used in this README

To change the app, edit src/index.src.html and run:

python3 build.py

The first build downloads MapLibre GL JS 4.7.1 with npm into vendor/ (ignored by git).

How it works

• Rendering: MapLibre GL JS draws OpenStreetMap vector tiles with a style generated from the current settings. Exports render the map off-screen at the full output size, then draw the text, icons, fade and border on a canvas.
• Tiles: OpenFreeMap (OpenMapTiles schema). No API key is needed.
• Search: Nominatim, with Photon as a fallback.

Limitations

• Cafés, shops and other small places appear only from zoom 14 (or zoom 12 with street detail set to Max). Stations show at every zoom.
• Very large exports depend on the graphics card. If it limits the canvas, the map part is scaled up and the app shows a notice.
• Nominatim is a free shared service meant for light use. It is fine for searching places by hand, not for automated bulk requests.

Credits and licenses

• Map data © OpenStreetMap contributors, available under the Open Database License. If you share or sell posters made with MapMaking, credit "© OpenStreetMap contributors" nearby, for example in the post or listing description.
• Vector tiles by OpenFreeMap, using the OpenMapTiles schema.
• MapLibre GL JS 4.7.1, BSD 3-Clause License, bundled in index.html.
• The game-inspired palettes are fan color homages. Game names and trademarks belong to their owners; MapMaking is not affiliated with or endorsed by them.
• Print PDF uses jsPDF (MIT), loaded on demand.
• Typefaces from Google Fonts, under the SIL Open Font License.

Support

MapMaking is free and open source. If it helped you make something you like, you can buy me a coffee on Ko-fi.

License

MapMaking is released under the MIT License. The bundled MapLibre GL JS keeps its own BSD 3-Clause License, and map data stays under the Open Database License (see Credits).