yuris/titik-gambut-next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Project scaffold, toolchain verification, and WebGL map baseline #1

New issue
Closed
opened 2026-10-14 18:24:05 +00:00 by yuris · 0 comments
yuris commented 2026-10-14 18:24:05 +00:00
Owner
Copy link

What to build

Set up the Next.js App Router workspace with TypeScript, Tailwind CSS, pnpm, and Vite+ (vp) for zero-config linting and formatting. Mount a full-viewport MapLibre GL map canvas on the home route (/) with a responsive dark-mode frame, coordinates readout, and build verification.

Technical specifications

  1. Target files:

    • src/app/page.tsx: Client or server wrapper rendering the full-viewport map.
    • src/app/layout.tsx: Root HTML layout importing Plus Jakarta Sans and JetBrains Mono fonts with dark-mode background #0e1110.
    • src/components/map/map-canvas.tsx: Core MapLibre GL JS wrapper component with clean cleanup on unmount.
    • src/lib/constants/map.ts: Default coordinates, bounding box, and basemap style URLs.
    • package.json, next.config.ts, tsconfig.json.

  2. Map engine and initial viewport:

    • Engine: maplibre-gl (v5.x).
    • Centroid: Indonesia centroid [118.0149, -2.5489] (longitude, latitude).
    • Initial Zoom: 4.8, Min Zoom: 3.5, Max Zoom: 18.
    • Bounding Box constraint: [[94.0, -11.5], [141.5, 6.5]] (prevent navigating away from Indonesian territory).
    • Basemap: Dark Carto style or clean vector tiles with dark background (#0e1110), land boundaries (#2d332f), and water bodies (#090c0a).

  3. Telemetry and HUD:

    • Bottom-left monospace readout (JetBrains Mono, 11px text) displaying cursor coordinate [Lng, Lat] and current camera zoom level.
    • Navigation controls (Zoom in, Zoom out, Compass reset) anchored top-right with dark theme styles.

Acceptance criteria

  • pnpm exec vp check passes with zero lint, format, or type errors.
  • pnpm build succeeds cleanly producing standalone production artifacts.
  • Visiting / renders a dark-mode MapLibre GL canvas centered on Indonesia with smooth 60 FPS camera pan and zoom.
  • Resizing browser window dynamically recalculates canvas dimensions without WebGL context loss.

Blocked by

None - can start immediately.

### What to build Set up the Next.js App Router workspace with TypeScript, Tailwind CSS, pnpm, and Vite+ (`vp`) for zero-config linting and formatting. Mount a full-viewport MapLibre GL map canvas on the home route (`/`) with a responsive dark-mode frame, coordinates readout, and build verification. ### Technical specifications 1. **Target files**: - `src/app/page.tsx`: Client or server wrapper rendering the full-viewport map. - `src/app/layout.tsx`: Root HTML layout importing Plus Jakarta Sans and JetBrains Mono fonts with dark-mode background `#0e1110`. - `src/components/map/map-canvas.tsx`: Core MapLibre GL JS wrapper component with clean cleanup on unmount. - `src/lib/constants/map.ts`: Default coordinates, bounding box, and basemap style URLs. - `package.json`, `next.config.ts`, `tsconfig.json`. 2. **Map engine and initial viewport**: - Engine: `maplibre-gl` (v5.x). - Centroid: Indonesia centroid `[118.0149, -2.5489]` (longitude, latitude). - Initial Zoom: `4.8`, Min Zoom: `3.5`, Max Zoom: `18`. - Bounding Box constraint: `[[94.0, -11.5], [141.5, 6.5]]` (prevent navigating away from Indonesian territory). - Basemap: Dark Carto style or clean vector tiles with dark background (`#0e1110`), land boundaries (`#2d332f`), and water bodies (`#090c0a`). 3. **Telemetry and HUD**: - Bottom-left monospace readout (`JetBrains Mono`, 11px text) displaying cursor coordinate `[Lng, Lat]` and current camera zoom level. - Navigation controls (Zoom in, Zoom out, Compass reset) anchored top-right with dark theme styles. ### Acceptance criteria - [x] `pnpm exec vp check` passes with zero lint, format, or type errors. - [x] `pnpm build` succeeds cleanly producing standalone production artifacts. - [x] Visiting `/` renders a dark-mode MapLibre GL canvas centered on Indonesia with smooth 60 FPS camera pan and zoom. - [x] Resizing browser window dynamically recalculates canvas dimensions without WebGL context loss. ### Blocked by None - can start immediately. ---
yuris closed this issue 2026-10-14 19:48:22 +00:00
yuris changed title from Issue 1: Project scaffold, toolchain verification, and WebGL map baseline to Project scaffold, toolchain verification, and WebGL map baseline 2026-10-14 22:31:31 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
feat/issue-51-concessions-layer
feat/issue-46-dual-mode-tile-url-resolver
feat/issue-44-45-protomaps-basemap-cutover
No results found.
Labels
Clear labels   
backend
Backend task

  
frontend
Frontend task

No labels
backend
frontend
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
yuris/titik-gambut-next#1
No description provided.