Minimap
NewPro
A canvas minimap where the player clears fog of war while walking, blips flash under a radar sweep, and the map zooms in and out.
Customize
2x
90
Radar sweep
Turn with player
Shape
When to use it
- HUD corners in RPG, survival and strategy games
- Exploration screens that show how much of a world has been found
- Delivery, event or campus maps that reveal stops as people reach them
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- 2D canvas
- Reduced motion
- Respected
- Lines of code
- 979
Installation
Minimap is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy minimap.tsx into components/ui.
Usage
import { Minimap } from "@/components/ui/minimap";
<Minimap
player={{ x: hero.x, y: hero.y, heading: hero.facing }}
blips={[
{ id: "forge", x: 660, y: 300, kind: "objective", label: "Forge" },
{ id: "wolf", x: 440, y: 400, kind: "enemy" },
]}
revealRadius={90}
onMapClick={(point) => setWaypoint(point)}
/>Props
20 properties| Property | Type | Default | Description |
|---|---|---|---|
| world | { width: number; height: number } | 1000 by 1000 | Size of the world, in the same units as the player and the blips. |
| player | { x: number; y: number; heading?: number } | — | Player position. Without it, the player walks on its own and clicks set where it goes. |
| blips | MinimapBlip[] | a sample set | Contacts with id, x, y, and optional kind, color, label and patrol radius. |
| defaultZoom | number | 2 | Starting zoom. 1 fits the whole world. |
| minZoom | number | 1 | Smallest zoom of the buttons. |
| maxZoom | number | 5 | Largest zoom of the buttons. |
| revealRadius | number | 90 | How far the player sees and clears fog, in world units. |
| fog | boolean | true | Hide unexplored ground. |
| sweep | boolean | true | Show the radar sweep. Blips flash as it passes. |
| sweepSpeed | number | 1 | Sweep speed multiplier. One turn takes four seconds at 1. |
| rotate | boolean | false | Turn the map with the player instead of keeping north up. |
| shape | "circle" | "square" | "circle" | Outline of the map. |
| size | number | 300 | Width and height in pixels. It shrinks to fit a narrow container. |
| color | string | "#ff784f" | Accent color of the rim, sweep and trail. |
| zoomControls | boolean | true | Show the plus and minus buttons. |
| zone | string | null | "Cinder Vale" | Zone name under the map. Pass null to hide the readout row. |
| paintMap | (ctx: CanvasRenderingContext2D, size: number) => void | — | Draws your own map in place of the generated terrain, on a square canvas. Called once when the map starts. |
| seed | number | 7 | Seed of the generated terrain and the walking route. |
| onMapClick | (point: { x: number; y: number }) => void | — | Called with world coordinates when the map is clicked. |
| className | string | — | Extra classes for the wrapper. |