MapPoster Online

Turn the cities you love into stunning designs

English | 简体中文

---

Project Description

A browser-based upgrade to maptoposter (Python CLI) — no installation needed, just open and go

Gallery

Asia

China - Beijing	Japan - Tokyo	South Korea - Seoul	China - Hong Kong

Singapore	Malaysia - Kuala Lumpur	Thailand - Bangkok	India - New Delhi

Europe

Switzerland - Zurich	Norway - Oslo	Sweden - Stockholm	Denmark - Copenhagen

Austria - Vienna	Germany - Berlin	United Kingdom - London	France - Paris

Italy - Rome	Russia - Moscow	Turkey - Istanbul	Netherlands - Amsterdam

Americas, Africa & Oceania

USA - New York	Canada - Ottawa	Brazil - São Paulo	Mexico - Mexico City

Argentina - Buenos Aires	Australia - Melbourne	South Africa - Cape Town	Chile - Santiago

Features

• 🚀 Zero installation — Runs entirely in the browser. Open the site, pick a city, and download your poster
• ⚡ Rust/WASM rendering engine — High-performance map rendering compiled from Rust to WebAssembly (powered by tiny-skia)
• 👁️ Live preview — See changes instantly and confirm results before exporting
• 🎨 20 built-in themes — From frozen Nordic minimalism to cyberpunk neon, vintage nautical to glitch purple
• ✏️ Custom color controls — Fine-tune every color: background, roads, water, green spaces, POIs, and text
• 📍 Custom POI pushpins — Search places through an Amap proxy, save your own POIs, and render them on the exported poster
• 📐 Multiple export formats — A4 (portrait/landscape), square, phone wallpaper, desktop 16:9, at 300 DPI for high-quality print
• 🌐 Multi-language interface — Supports English, Japanese, Korean, Simplified Chinese, German, Spanish, and French
• 💾 IndexedDB caching — Previously fetched map data is cached locally for faster regeneration
• 🔤 Dynamic font loading — Use built-in serif fonts or upload your own TTF/OTF files
• 🐍 Snake game — Beat boredom while waiting for your poster to generate (inspired by Chrome Dinosaur Game)

How it differs from maptoposter (Python CLI)

This project was inspired by maptoposter (Python CLI) — they each have their own strengths for different use cases:

	maptoposter-online	maptoposter (Python CLI)
Usage	Open in browser, no install needed	Command-line interface, requires local setup
Best for	Quick start, on-the-go usage	Command-line enthusiasts, advanced local customization
Rendering engine	Rust/WASM (tiny-skia)	Python/matplotlib
Platform	Cross-browser, any device	Desktop only (requires Python)

Different tech stacks, same goal — turning your favorite city into unique art.

Local Development

Tech Stack

• Build — Vite 7 + Bun
• Frontend — React 19 + TypeScript
• Styling — Tailwind CSS v4
• UI components — Radix UI + lucide-react
• Map data — OpenStreetMap (Overpass API) + Protomaps
• Rendering — Rust (wasm-pack) + tiny-skia
• i18n — @inlang/paraglide-js
• Caching — IndexedDB (idb)

Requirements

• Bun (recommended) or Node.js 22+
• Rust (for building WASM)
• wasm-pack

Setup

# 1. Install dependencies
bun install

# 2. Build the Rust/WASM rendering engine
# Compile Rust to WebAssembly using wasm-pack
cd wasm && wasm-pack build --target web --out-dir ../src/pkg
# Or use the npm script:
bun run build:wasm

# 3. Start the dev server
bun run dev

# 4. App available at http://localhost:5173

Available Scripts

Command	Description
bun run dev	Start dev server
bun run build	Build for production
bun run build:wasm	Rebuild WASM engine
bun run preview	Preview production build
bun run lint	Run linter
bun run fix	Format + lint with auto-fix

Custom POI Setup

The custom POI dialog uses the Amap geocoding API through a proxy endpoint at /api/amap-proxy/.

1. Apply for your own Amap Web Service API key at the Amap Open Platform.
2. Configure a proxy endpoint that forwards requests to https://restapi.amap.com/v3/geocode/geo.
3. Open the Pushpin section in the app, paste the key, test it, then start searching.

Example Cloudflare Worker flow:

export default {
  async fetch(request: Request) {
    const url = new URL(request.url);
    const upstream = new URL("https://restapi.amap.com/v3/geocode/geo");
    upstream.search = url.search;

    return fetch(upstream, {
      headers: {
        accept: "application/json",
      },
    });
  },
};

Notes:

• The current frontend assumes the proxy endpoint is /api/amap-proxy/.
• The frontend sends key, address, and city query parameters to the proxy.
• Users must provide their own Amap key. Free-tier limits are managed by Amap.

Engineering Notes

Rendering Engine — Rust/WASM

• Font anti-aliasing — 2× supersampling + Box Filter downsampling
• Road hierarchy lacking depth — Road casing rendered in two passes (stroke first, then fill) + Z-order controls draw sequence by road class
• Rendering too slow — Douglas-Peucker in screen coordinate space removes subpixel redundancy; single-scan dispatch by feature type

Data Processing

• Python OSMnx workflow ported — Professional geospatial data processing logic adapted from osmnx
• Overpass query failures — Auto-splits oversized areas into smaller chunks (2500km² default limit) to prevent Overpass failures
• Single node timeout causing long waits — Concurrent requests to 4 mirror servers, fastest response wins

Page Responsiveness

• Generation blocking the page — Data fetching, projection transforms, and WASM rendering all run in a Web Worker; road precision auto-reduces at large radii
• Repeated generation taking too long — IndexedDB Gzip-compressed cache, ~100KB per city; direct read on regeneration

License

MIT License — see LICENSE

💖 Support

If this project has saved you time or made your life easier, consider buying me a coffee. Your support is the driving force behind the continued maintenance of this project!

Platform	Payment Method	Link
Afdian	WeChat / Alipay	👉 Click to Sponsor
Buy Me a Coffee	Credit Card / Apple Pay / Google Pay	👉 Click to Sponsor

Acknowledgments

Inspired by @originalankur's maptoposter

Map data provided by OpenStreetMap and Protomaps

Font LXGW Neo ZhiSong (霞鹜新致宋) by lxgw, licensed under IPA Font License 1.0