Try it live: map-paper.pages.dev

Make a poster or a wallpaper out of any place on Earth. There are 41 styles to pick from. Some copy old cartography, some borrow from map apps, and the rest are made up. Everything renders live in the browser and exports big enough to print.

You need Node.js 18 or newer, and a browser that supports WebGL. Chrome, Edge, Firefox and Safari all work. There is nothing to sign up for and no API key to get.

git clone https://github.com/deepakvettickal/map-paper.git
cd map-paper
npm install
npm run dev

Open http://localhost:5173. It takes a moment on first load while the map tiles come down.

Then:

1. Search for a place in the sidebar. You can also drag and scroll the poster to frame it yourself.
2. Pick a style, then change any of the colours, fonts, border and text if you want to.
3. Choose a size. A4, A3, square, phone, or 4K desktop. Paper sizes also have a DPI setting.
4. Hit Download PNG and the file goes to your downloads folder.

Save config writes the whole poster to a JSON file: the style, every colour, the place, the text and the output size. Load config puts it all back. Handy for keeping a look you like, or sending one to someone else.

In a hurry, or just browsing? Surprise me picks a style, a city and a fresh palette for you. The three squares in the corner switch the interface between light, dark and AMOLED black.

You can link straight to a style and a place: ?style=nolli&lat=51.5&lng=-0.12&zoom=14&size=desktop.

Other commands:

npm run build       # typecheck and build to dist/
npm run preview     # serve the production build
npm run typecheck   # types only

If something looks wrong. A blank map usually means the browser window was behind another one. Browsers stop drawing WebGL in the background, so bring the window to the front and it will come back. If an export fails with a size error, drop the DPI. Very large canvases go past what some graphics cards allow.

Each style is a single JSON file in src/styles/, so adding one means adding a file rather than writing code. Every style also opens at a place that suits it, which is what you see below.

Nolli - after Giambattista Nolli, 1748 Rome, Italy	Sanborn - after Sanborn fire-insurance maps San Francisco, California, USA
Snow - after John Snow's cholera map, 1854 Soho, London, UK	Booth - after Charles Booth's poverty map, 1889 Whitechapel, London, UK
Ordnance - after Ordnance Survey first edition Edinburgh, Scotland	Soviet Topo - after Soviet military topographic maps Saint Petersburg, Russia
Harry Beck - after Harry Beck's Underground diagram, 1933 King's Cross, London, UK	Vignelli - after Massimo Vignelli's subway map, 1972 Midtown, New York, USA

Ukiyo-e - after Edo-period woodblock maps Asakusa, Tokyo, Japan	Bauhaus - after the Bauhaus and Swiss International Style Dessau, Germany
Art Deco - after 1920s Art Deco posters Miami Beach, Florida, USA	Blueprint - after architectural blueprints Chandigarh, India
Cyanotype - after Anna Atkins' cyanotypes, 1840s Amsterdam, Netherlands	Stained Glass - after Gothic stained glass Chartres, France
Risograph - after risograph zines Kreuzberg, Berlin, Germany	Linocut - after linocut printmaking Alfama, Lisbon, Portugal
Pencil - after a graphite sketchbook Île de la Cité, Paris, France	Watercolor - after painted map washes Kochi, Kerala, India
Starry Night - after Van Gogh's The Starry Night, 1889 Saint-Rémy-de-Provence, France

Pastel - soft pastels on warm beige Nyhavn, Copenhagen, Denmark	Sakura - cherry blossom in spring Gion, Kyoto, Japan
Solarpunk - sun, glass and greenery Marina Bay, Singapore	Dune - desert ochres and deep shade Dubai, United Arab Emirates
Nordic - pale northern light Reykjavík, Iceland

Solarized Light - after Ethan Schoonover's Solarized Light Copenhagen, Denmark	Solarized Dark - after Ethan Schoonover's Solarized Dark Seattle, United States

These borrow the thinking behind each map: how colour is used, how road types are ranked, the overall mood. No assets or code are taken from them.

GMaps Dark - inspired by the dark mode of Google Maps San Francisco, California, USA	Search - inspired by the light mode of Google Maps Mountain View, California, USA
Drive - inspired by the design philosophy of Waze Tel Aviv, Israel	Here - inspired by the design philosophy of HERE Maps Mitte, Berlin, Germany
Toner - inspired by Stamen Toner The Loop, Chicago, USA	Night - inspired by CARTO Dark Matter Victoria Harbour, Hong Kong

Circuit - printed circuit boards Futian, Shenzhen, China	Synthwave - 80s retro-futurism Santa Monica, California, USA
Neon - neon signs after dark Shinjuku, Tokyo, Japan	Brutalist - raw concrete architecture South Bank, London, UK
8-bit - handheld pixel-art games Kyoto, Japan

Colour themes from prettymaps and prettymapp, rebuilt on this engine.

Heerhugowaard - after the prettymaps preset of the same name Stad van de Zon, Heerhugowaard, Netherlands	Peach - after the Peach theme in prettymapp Macau, China
Auburn - after the Auburn theme in prettymapp Eixample, Barcelona, Spain	Citrus - after the Citrus theme in prettymapp Würzburg, Germany

• Vector tiles instead of API calls. OpenFreeMap tiles are drawn on the GPU by MapLibre GL. Panning, zooming and restyling happen straight away, and nothing is re-fetched when a colour changes.
• Styles are just data. A StyleSpec carries the colours, road widths for each class, pattern fills, fonts, frame and effects. src/engine/buildMapStyle.ts turns that into a MapLibre style.
• The art renderer. src/engine/patterns.ts builds hatching, crosshatch, stipple, waves and dot fills as they are needed. src/engine/effects.ts then runs a single WebGL pass over the finished poster for paper texture, grain, shaky lines, ink misregistration, pixelation and vignetting. Everything is measured in poster units, which is why a 300 DPI export looks like the preview. There is a switch and a strength slider in the sidebar.
• Export. A hidden map renders at a higher pixel ratio, then the frame, text and effects are composited on top. A4 at 300 DPI finishes in well under a second on a normal graphics card.

src/
  config/      style + poster types, paper and wallpaper sizes
  styles/      one JSON file per style
  engine/      style builder, pattern generator, effects shader, PNG export
  poster/      the poster component and its frame/text overlay
  ui/          sidebar controls
  services/    place search (Nominatim)
scripts/       snapshot, contact-sheet and gallery tooling

node scripts/snap.mjs out/ nolli pencil     # screenshot styles with the local Chrome
node scripts/contact-sheet.mjs out/         # lay them out side by side
node scripts/gallery.mjs [ids…]             # rebuild the README gallery
node scripts/hero.mjs [a] [b] [lat] [lng] [zoom]   # rebuild the split hero image

CLAUDE.md has the architecture notes and what is planned next, including 3D terrain and buildings, and map ornaments like compass roses and cartouches.

• Add more styles
• Publish and serve the tool, for access without cloning the repo
• Let people send in a palette they made with Surprise me, so good ones can become styles
• Build a gallery of posters people have made, replayed live from their saved configs

Bigger plans such as 3D terrain, map ornaments and SVG or PDF export are listed in CLAUDE.md.

The site is a static build plus one serverless function on Cloudflare Pages; see DEPLOY.md.

Usage is counted anonymously: visits, exports, randomisations and config saves. There are no cookies, no fingerprinting and no third-party analytics, and the session id lives in sessionStorage, so it is gone when the tab closes. Downloads also record the poster config, which is what the planned gallery will replay.

The browser never touches the database. Events go to this site's own /api/event, which holds the credentials and writes to Firestore; firestore.rules denies every client read and write.

One row per style, in the order they appear in the app. The historic maps are long out of copyright, but their makers are named here anyway. Styles marked original are new designs, so there is nobody to credit.

The map-app styles take inspiration from how those maps are designed. They do not copy any assets, code or map styles, and this project is not affiliated with or endorsed by those companies.

map-paper builds on the work of these open source projects.

• prettymaps by Marcelo Prates, which started artistic OpenStreetMap posters. Its inked look and JSON presets shaped how styles are described here, and the Heerhugowaard style is a tribute to its preset of the same name.
• prettymapp by Christoph Rieke, a tidier take on prettymaps with a friendly web UI.
• terraink by Yousif Amanuel, which shows how fast and polished a browser-based poster maker can be when it is built on vector tiles and MapLibre.

None of the AGPL-licensed code was copied. The ideas were rebuilt from scratch.

• MapLibre GL JS for GPU map rendering
• OpenFreeMap for free vector tiles
• OpenStreetMap for map data © OpenStreetMap contributors
• Nominatim for place search

Fixes and ideas are welcome. To propose a change:

1. Fork the repo (or create a branch if you have push access), and start from an up-to-date main: git checkout main && git pull.
2. Branch for your change: git checkout -b my-change.
3. Make the change and check it still builds: npm run build (this also typechecks). If you touched a style, look at a screenshot — style work can't be verified by reading JSON.
4. Commit and pu