MisterMR MAP Creator
๐บ๏ธ MisterMR MAP Creator
๐ Complete User Manual — v1.0
๐ Getting Started
Welcome, cartographer! ๐ MisterMR MAP Creator lets you sketch a rough map layout and magically โจ transform it into a detailed, top-down city map — complete with buildings ๐ , roads ๐ค๏ธ, rivers ๐, districts ๐๏ธ, walls ๐ฐ, and more!
โก Quick Start (30 seconds!)
- ๐๏ธ Click New City in the header — a random city is generated instantly!
- ๐จ Tweak colors from the bottom Colors bar.
- ๐ค Hit Export โ choose PNG, SVG, or JSON.
- ๐ Done! You've got a beautiful map.
๐๏ธ Custom Map (Full Workflow)
- ๐ Select the Sea brush and paint ocean areas on the 32ร32 sketch canvas.
- ๐ซ Switch to Ground to define landmass.
- โ Place the City marker — this is where your city will grow.
- ใฐ๏ธ Optionally paint a River flowing through the land.
- โ๏ธ Adjust City Size (1โ100) and Tile Detail (80โ1024 Voronoi seeds).
- โจ Press Generate to create the final map!
๐ฎ Interface Overview
๐ Header Bar
| Button | What it does |
|---|---|
| ๐๏ธ New City | Generates a completely random city sketch + map in one click ๐ฒ |
| ๐พ Save | Saves the current project to browser storage (with thumbnail preview!) ๐ธ |
| ๐ Load | Opens a modal listing all your saved cities — pick one to restore ๐ |
| ๐ฅ Import | Loads a project from a .json file on your computer ๐ป |
| ๐ค Export โผ | Downloads the map as PNG ๐ผ๏ธ, SVG โ๏ธ, or JSON ๐ |
๐ Left Sidebar
| Control | Description |
|---|---|
| ๐๏ธ City Name | Type a name or keep the random one — it appears as the map title โ๏ธ |
| ๐ผ๏ธ Sketch Canvas | 32ร32 grid — click or drag to paint ๐จ |
| ๐ต Brush Size | 1โ5 cells wide — bigger brush for faster painting ๐๏ธ |
| ๐๐ซโใฐ๏ธ Tools | Sea, Ground, City, River — select your brush type ๐ง |
| ๐งน Clean | Wipes the entire sketch (asks for confirmation!) โ ๏ธ |
| ๐ฒ Random | Generates a random sketch with coastline, river, and city placement ๐ |
| ๐๏ธ City Size | Slider 1โ100 — controls how large the city sprawls ๐ |
| ๐ Tile Detail | 80โ1024 seeds — more seeds = finer detail (slower generation) ๐ |
| โจ Generate | The magic button! Transforms sketch โ detailed map ๐ช |
๐จ Color Bar (Bottom)
Click Show / Hide to reveal 8 color pickers:
- ๐ซ Ground — land color
- โฐ๏ธ Ground High — elevated terrain
- ๐ Sea — water bodies
- ๐๏ธ City — urban fill
- ๐ง River — river and stream color
- ๐ค๏ธ Road — street color
- ๐ Building — building fill
- ๐๏ธ District — district outlines
๐ฒ Hit Randomize for a surprise palette — the map regenerates automatically! ๐
๐บ๏ธ Map Generation — How It Works
Under the hood, the generator uses a multi-stage pipeline ๐งโ๏ธ:
- ๐ท Voronoi Tessellation — Random seed points are placed and relaxed (Lloyd's algorithm) using d3-delaunay to create organic, natural-looking cells.
- ๐ Zoning — Each cell is classified as sea ๐, river ๐ง, city ๐๏ธ, or countryside ๐ซ based on your sketch.
- ๐ค๏ธ Roads — Main roads radiate from city gates to the center; side streets fill in the grid.
- ๐ Buildings — City cells get building plots with footprints and hip-roof style rooftops.
- ๐๏ธ Districts — City cells are grouped into named districts (randomly chosen from 400+ names!).
- ๐ฐ Details — City walls, a citadel, the river path, a scale bar ๐, and a compass ๐งญ are overlaid.
๐ก Tip: Higher Tile Detail values produce more intricate maps but take longer to generate. Start with 180โ300 for a nice balance! โ๏ธ
๐พ Saving & Loading
๐๏ธ Browser Storage
Your work is auto-saved to localStorage every time you make a change ๐. Additionally:
- ๐พ Save creates a named snapshot with a thumbnail preview ๐ธ
- ๐ Load shows all saved cities in a visual list — click to restore ๐ฑ๏ธ
โ ๏ธ Warning: Browser storage is tied to your browser and computer. Clearing browser data will erase saves! Use Export JSON for backups ๐ฆ
๐ File Import / Export
- ๐ค Export JSON — saves the full project state (sketch, colors, settings, generated map) as a
.jsonfile. - ๐ฅ Import — restores a project from a
.jsonfile. - ๐ผ๏ธ Export PNG — downloads the generated map as a high-quality raster image.
- โ๏ธ Export SVG — downloads as scalable vector graphics (perfect for editing in Inkscape/Illustrator!) ๐จ
๐ฏ Tips & Tricks
- ๐ฒ Spam New City to quickly browse random cities until one catches your eye! ๐
- ๐๏ธ Use a large brush (size 4โ5) to rough out coastlines fast, then refine with size 1 ๐จ
- โ Place the city marker near the coast or a river for realistic positioning ๐๐๏ธ
- ๐ Crank Tile Detail to 800+ for incredibly detailed maps (may take a few seconds โณ)
- ๐ Randomize Colors often produces surprisingly beautiful palettes — save the ones you love! ๐
- ๐ค Export as SVG for crisp prints at any size — perfect for tabletop RPGs! ๐ฒ๐
โจ๏ธ Keyboard & Mouse
| Action | How |
|---|---|
| Paint on sketch | ๐ฑ๏ธ Click or drag on the canvas |
| Switch tools | ๐ฑ๏ธ Click the tool buttons (๐๐ซโใฐ๏ธ) |
| Navigate saved cities | ๐ฑ๏ธ Click items in the Load modal |
| Close modals | ๐ฑ๏ธ Click backdrop or โ button |
โ FAQ
๐ค Why is my map blank after generating?
Make sure you've placed the City marker (โ) on the sketch! Without it, the generator doesn't know where to build ๐๏ธ
๐ค Can I use the maps commercially?
Yes! ๐ Maps generated by MisterMR MAP Creator are yours to use however you like — personal projects, commercial games, published adventures, prints, you name it! ๐
๐ค The generation takes too long!
Lower the Tile Detail slider. Values around 150โ250 generate in under a second on most machines โก
๐ค How do I make an island?
Paint the entire sketch as Sea ๐, then paint a blob of Ground ๐ซ in the middle, and place the city on it! ๐๏ธ
๐บ๏ธ MisterMR MAP Creator — Made with โ๏ธ gears, โจ magic, and โค๏ธ passion
© 2026 MisterMR
Development log
Leave a comment
Log in with itch.io to leave a comment.