Palette-index terrain, selectable decorations and a separate bearing locator.
Preview
Usage
Import MinecraftMap and LocatorBar from @/components/ui/map, using the installable identity map. MinecraftMap requires a Uint8Array of exactly 16,384 bytes: one palette index for each of 128 by 128 pixels. It does not accept RGBA bytes, a PNG or a world seed.
The primary example creates its entire two-color palette tile inline. It needs no saved world, external pixel file or demo-only map-world-data helper. Palette indices whose base color is zero are transparent. Replace the array when updating terrain.
Composition
Markers have unique IDs, labels and x/y map coordinates; positions map to 64 + x / 2, 64 + y / 2. decoration chooses a supported atlas entry; rotation is a step index multiplied by 22.5 degrees. onMarkerSelect returns the marker ID. Bare-terrain onMapClick returns clamped pixel coordinates from 0 through 127 and is pointer-only; labelled marker buttons provide keyboard access.
The named LocatorBar example supplies bearing in degrees and controls heading separately. It shows bearings relative to heading in (-60, 60]. Marker color, shape and optional up/down direction are independent API fields. Rotation and terrain generation remain caller responsibilities.
Map Locator
Installation
The locator example additionally uses the button item for heading controls. The terrain example requires only this Map installation and its inline pixel data.
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import * as React from "react";
import { adventureAssets } from "./minecraft-adventure-assets";
import { AdventureImage } from "./minecraft-adventure-image";
import { mapAtlasPng } from "./minecraft-map-atlas";
import { mapGpuPixels } from "./minecraft-map-gpu";
import { minecraftMapPalette } from "./minecraft-map-palette";
import {
minecraftClasses as cn,
minecraftStyle,Interactive playground
Regional map
Home
Select a marker or a point on the map.
Verified coverage and limitations
The illustrative palette tile differs from the frozen saved-world capture; do not compare it to that capture as if its input matched. Retained palette, terrain and decoration cases apply only to their recorded data and geometry. Atlas/GPU marker painting is asynchronous; fallback DOM placement alone does not demonstrate native pixel fidelity.
The retained playground is additional interactive reference content. It is distinct from the maintained consumer example shown under Preview. Documentation layouts and controls are web adaptations; source/reference bytes and their original provenance remain authoritative for declared cases.