Drainage canal vector line layer with high-zoom styling (`canals-layer.tsx`) #57

New issue

Closed

opened 2026-10-14 22:28:39 +00:00 by yuris · 0 comments

yuris commented

2026-10-14 22:28:39 +00:00

Owner

What to build

Implement the MapLibre line layer in src/components/map/layers/canals-layer.tsx to render drainage canal paths at high zoom levels (z >= 11) with distinct color coding for drained vs. blocked canals.

Technical specifications

Target files:
- src/components/map/layers/canals-layer.tsx: MapLibre line layer component.
Styling rules:
- Primary canals: #06b6d4 (cyan-500), width 1.5px.
- Dry/drained canals: #f97316 (orange-500), width 1.2px.
- Minzoom: 11 (hidden at overview zooms to ensure optimal rendering performance).

Acceptance criteria

Canals appear smoothly when zooming into z11+ without frame drops.
Line colors clearly indicate whether canal section is active drainage or mitigated.

Blocked by

Issue 33: [Frontend] Dual-mode tile URL resolver helper (src/lib/gis/tile-url.ts).
Issue 41: [Backend] Agricultural drainage canal network ingestion & PMTiles compiler (scripts/build-canals-pmtiles.sh).

Authoritative Specifications & Reference Documentation

Titik Gambut Architecture & Subsystem Contract: docs/ARCHITECTURE.md
Protomaps PMTiles Specification: protomaps/PMTiles GitHub — cloud-optimized single-file vector/raster tile format using HTTP 206 byte-range requests.
Protomaps Basemaps Style & Docs: protomaps.com/docs
BRGM PRIMS (Peatland Restoration Information & Monitoring System): prims.brgm.go.id — Peat drainage canals, canal blocks (sekat kanal), and deep wells (sumur bor).
Pantau Gambut Canal Network: pantaugambut.id — Field verification data on drainage canal degradation.

### What to build Implement the MapLibre line layer in `src/components/map/layers/canals-layer.tsx` to render drainage canal paths at high zoom levels (z >= 11) with distinct color coding for drained vs. blocked canals. ### Technical specifications 1. **Target files**: - `src/components/map/layers/canals-layer.tsx`: MapLibre line layer component. 2. **Styling rules**: - Primary canals: `#06b6d4` (cyan-500), width 1.5px. - Dry/drained canals: `#f97316` (orange-500), width 1.2px. - Minzoom: 11 (hidden at overview zooms to ensure optimal rendering performance). ### Acceptance criteria - [ ] Canals appear smoothly when zooming into z11+ without frame drops. - [ ] Line colors clearly indicate whether canal section is active drainage or mitigated. ### Blocked by - Issue 33: [Frontend] Dual-mode tile URL resolver helper (`src/lib/gis/tile-url.ts`). - Issue 41: [Backend] Agricultural drainage canal network ingestion & PMTiles compiler (`scripts/build-canals-pmtiles.sh`). --- ### 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) - **Protomaps PMTiles Specification**: [protomaps/PMTiles GitHub](https://github.com/protomaps/PMTiles) — cloud-optimized single-file vector/raster tile format using HTTP 206 byte-range requests. - **Protomaps Basemaps Style & Docs**: [protomaps.com/docs](https://docs.protomaps.com/basemaps/) - **BRGM PRIMS (Peatland Restoration Information & Monitoring System)**: [prims.brgm.go.id](https://prims.brgm.go.id/) — Peat drainage canals, canal blocks (*sekat kanal*), and deep wells (*sumur bor*). - **Pantau Gambut Canal Network**: [pantaugambut.id](https://pantaugambut.id/) — Field verification data on drainage canal degradation.

yuris added this to the Hydrology & Peat Restoration Cartography (Frontend) milestone

2026-10-14 22:28:39 +00:00

yuris added the

frontend

label

2026-10-14 22:28:39 +00:00

yuris changed title from ~~Issue 44: [Frontend] Drainage canal vector line layer with high-zoom styling (canals-layer.tsx)~~ to [Frontend] Drainage canal vector line layer with high-zoom styling (canals-layer.tsx)

2026-10-14 22:31:26 +00:00

yuris changed title from ~~[Frontend] Drainage canal vector line layer with high-zoom styling (canals-layer.tsx)~~ to Drainage canal vector line layer with high-zoom styling (canals-layer.tsx)

2026-10-14 22:38:31 +00:00

yuris referenced this issue from a commit

2026-10-15 04:25:23 +00:00

feat(map): add canals vector line layer, nearest firefighter emergency card, and tactical dispatch vector line

yuris referenced this issue

2026-10-15 04:25:33 +00:00

feat(map): tactical response dispatch, canals layer, corporate accountability, and 3D TMAT model (#53, #56, #57, #63, #64, #77) #116

yuris referenced this issue from a commit

2026-10-15 04:52:50 +00:00

feat(map): tactical response dispatch, canals layer, corporate accountability, and 3D TMAT model (#53, #56, #57, #63, #64, #77) (#116)

yuris closed this issue

2026-10-15 04:53:34 +00:00