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

3D perspective camera controls & pitch toggle button (map-3d-toggle.tsx) #83

New issue
Closed
opened 2026-10-14 22:28:45 +00:00 by yuris · 1 comment
yuris commented 2026-10-14 22:28:45 +00:00
Owner
Copy link

What to build

Build a quick-toggle button in src/components/controls/map-3d-toggle.tsx that smoothly animates the MapLibre camera between flat 2D top-down view (pitch: 0, bearing: 0) and 3D oblique perspective (pitch: 55, bearing: -20), toggling 3D volumetric layers on demand.

Technical specifications

  1. Target files:
    • src/components/controls/map-3d-toggle.tsx: Floating camera control button with 3D/2D cube icon.
    • src/store/map-store.ts: Add is3DMode: boolean and camera pitch action.

Acceptance criteria

  • Tapping 3D button transitions camera pitch smoothly with MapLibre easeTo.
  • Activates 3D extrusion layers in 3D mode and hides them in 2D mode for maximum performance.
  • Button visually toggles active state.

Blocked by

  • Issue 66: [Frontend] 3D Volumetric Peat Dome fill-extrusion layer & pitch transition (peat-extrusion-layer.tsx).

Authoritative Specifications & Reference Documentation

### What to build Build a quick-toggle button in `src/components/controls/map-3d-toggle.tsx` that smoothly animates the MapLibre camera between flat 2D top-down view (`pitch: 0, bearing: 0`) and 3D oblique perspective (`pitch: 55, bearing: -20`), toggling 3D volumetric layers on demand. ### Technical specifications 1. **Target files**: - `src/components/controls/map-3d-toggle.tsx`: Floating camera control button with 3D/2D cube icon. - `src/store/map-store.ts`: Add `is3DMode: boolean` and camera pitch action. ### Acceptance criteria - [ ] Tapping 3D button transitions camera pitch smoothly with MapLibre `easeTo`. - [ ] Activates 3D extrusion layers in 3D mode and hides them in 2D mode for maximum performance. - [ ] Button visually toggles active state. ### Blocked by - Issue 66: [Frontend] 3D Volumetric Peat Dome `fill-extrusion` layer & pitch transition (`peat-extrusion-layer.tsx`). ### Authoritative Specifications & Reference Documentation - **Titik Gambut Architecture & Subsystem Contract**: [`docs/ARCHITECTURE.md`](https://git.nokopia.com/yuris/titik-gambut-next/src/branch/main/docs/ARCHITECTURE.md) - **BIG DEMNAS National Digital Elevation Model**: [Ina-Geoportal DEMNAS](https://tanahair.indonesia.go.id/demnas/) — 0.27 arc-second seamless national elevation mesh. - **MapLibre GL JS Terrain 3D Spec**: [MapLibre 3D Terrain](https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/) — Hardware-accelerated client elevation.
yuris changed title from Issue 70: [Frontend] 3D perspective camera controls & pitch toggle button (map-3d-toggle.tsx) to [Frontend] 3D perspective camera controls & pitch toggle button (map-3d-toggle.tsx) 2026-10-14 22:31:23 +00:00
yuris changed title from [Frontend] 3D perspective camera controls & pitch toggle button (map-3d-toggle.tsx) to 3D perspective camera controls & pitch toggle button (map-3d-toggle.tsx) 2026-10-14 22:38:28 +00:00
yuris commented 2026-10-15 01:26:16 +00:00
Author
Owner
Copy link

This was generated by AI during triage.

Closed as completed in main (src/components/controls/terrain-toggle.tsx and dem-terrain.ts animateCamera3D pitch controls).

> *This was generated by AI during triage.* Closed as completed in main (src/components/controls/terrain-toggle.tsx and dem-terrain.ts animateCamera3D pitch controls).
yuris closed this issue 2026-10-15 01:26:16 +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#83
No description provided.