Files
MCMapper-Backend/frontend/src/public/js/map.js
T
octoturge 7bed571ffa Phase 1: chunk store, tile rendering pipeline, and Leaflet viewer
api: WS gateway with token auth (Postgres-backed servers table, seeded via
`bun run seed`), column-granularity chunk store (hand-written SQL
migrations, no drizzle-kit CLI — its config loader needs esbuild, which
doesn't install cleanly here), dirty-chunk Redis stream producer with
per-flush dedup, and a tile-serving route.

worker: consumes the dirty-chunk stream via a proper consumer group,
rasterizes each chunk's columns into a single-resolution top-down PNG
(static pre-Flattening block-id palette), uploads to MinIO, and upserts
the tile pointer.

frontend: barebones Leaflet 2D viewer (CRS.Simple, one native zoom level)
wired to /api/servers and /api/tiles.

Object storage: tiles live in a dedicated `mcmapper-tiles` bucket on the
existing shared MinIO instance (devstack-minio on octo-winsrv) instead of
a per-stack container, via a scoped access key limited to that one bucket
— see README's "Object storage" section. MINIO_SECRET_KEY is real and is
deliberately not committed; docker-compose layers an untracked .env over
.env.example for it.

Full pipeline verified end-to-end against live containers: WS auth ->
Postgres upsert -> deduped Redis dirty-chunk event -> worker rasterize ->
MinIO upload -> tile fetch through the api route, including from the
actual mod-side WS client (see MCMapper-Mod's matching commit).
2026-08-08 15:36:56 +02:00

39 lines
1.5 KiB
JavaScript

// Barebones Leaflet viewer (Phase 1). No auth/marker/chat UI yet — those are Phase 3/4.
//
// Tiles are one Minecraft chunk (16x16 blocks) each, upscaled to 256px, at a single native
// zoom level (see api's tile route + worker/src/render/cpu.rs) — Leaflet stretches that one
// native zoom to whatever zoom the user picks via `maxNativeZoom`/`minNativeZoom`.
//
// Coordinate mapping: Leaflet's CRS.Simple treats [lat, lng] as [y, x] with y growing upward
// on screen. Minecraft's Z grows south (visually "down" on a conventional north-up map), so
// tile y = -chunkZ here; the api negates it back to chunkZ when looking up the tile pointer
// (see api/src/index.ts's /api/tiles route comment).
function mapmapper() {
return {
loading: true,
server: null,
leaflet: null,
async init() {
const servers = await fetch("/api/servers").then((r) => r.json());
this.loading = false;
this.server = servers[0] ?? null;
this.leaflet = L.map("map", { crs: L.CRS.Simple, minZoom: -4, maxZoom: 6 });
this.leaflet.setView([0, 0], 0);
if (this.server) {
L.tileLayer(`/api/tiles/${this.server.id}/0/{z}/{x}/{y}.png`, {
tileSize: 256,
minNativeZoom: 0,
maxNativeZoom: 0,
noWrap: true,
errorTileUrl:
"data:image/svg+xml;base64," +
btoa('<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><rect width="256" height="256" fill="#1e1e28"/></svg>'),
}).addTo(this.leaflet);
}
},
};
}