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

feat(map): concession vector boundary & translucent fill layer (concessions-layer.tsx) #51

New issue
Closed
opened 2026-10-14 22:28:37 +00:00 by yuris · 0 comments
yuris commented 2026-10-14 22:28:37 +00:00
Owner
Copy link

This was generated by AI during triage.
Enriched to align with docs/ARCHITECTURE.md §7.1 and PR #99.

What to build

Implement the MapLibre GL JS concession vector layer in src/components/map/layers/concessions-layer.tsx to render authentic corporate concession boundaries from public/tiles/concessions.pmtiles (or Cloudflare R2 CDN) with color-coded boundaries and translucent fills based on concession type.

Technical specifications

  1. Target files:
    • src/components/map/layers/concessions-layer.tsx: Source and layer specifications.
    • src/components/map/map-view.tsx: Layer mounting behind hotspots-clusters.
  2. Layer Configuration:
    • Source ID: concessions-source
    • Source Layer: concessions
    • URL: pmtiles:///tiles/concessions.pmtiles (resolved via CDN when NEXT_PUBLIC_CDN_URL is set).
    • Minzoom: 5, Maxzoom: 14.
  3. Visual Design Tokens (DESIGN.md):
    • Palm Oil (HGU_SAWIT / SAWIT_HGU): Stroke #f59e0b (Amber-500), Fill rgba(245, 158, 11, 0.12).
    • Industrial Timber (PBPH_HTI): Stroke #a855f7 (Purple-500), Fill rgba(168, 85, 247, 0.12).
    • Natural Forest (IUPHHK_HA / PBPH_HA): Stroke #3b82f6 (Blue-500), Fill rgba(59, 130, 246, 0.12).
    • Conservation / National Park (KONSERVASI): Stroke #10b981 (Emerald-500), Fill rgba(16, 185, 129, 0.15).
  4. Lifecycle Functions:
    • addConcessionsLayers(map: MapLibreMap): void
    • setConcessionsVisibility(map: MapLibreMap, visible: boolean): void

Acceptance criteria

  • Concession polygons render with distinct color matching concession type across zoom levels 5 to 14.
  • Layer is inserted behind active fire clusters so fire markers remain prominent.
  • Toggle visibility function integrates with layer-toggles.tsx.
  • Unit tests verify layer specification structure and visibility toggling.
> *This was generated by AI during triage.* > *Enriched to align with docs/ARCHITECTURE.md §7.1 and PR #99.* ### What to build Implement the MapLibre GL JS concession vector layer in `src/components/map/layers/concessions-layer.tsx` to render authentic corporate concession boundaries from `public/tiles/concessions.pmtiles` (or Cloudflare R2 CDN) with color-coded boundaries and translucent fills based on concession type. ### Technical specifications 1. **Target files**: - `src/components/map/layers/concessions-layer.tsx`: Source and layer specifications. - `src/components/map/map-view.tsx`: Layer mounting behind `hotspots-clusters`. 2. **Layer Configuration**: - Source ID: `concessions-source` - Source Layer: `concessions` - URL: `pmtiles:///tiles/concessions.pmtiles` (resolved via CDN when `NEXT_PUBLIC_CDN_URL` is set). - Minzoom: 5, Maxzoom: 14. 3. **Visual Design Tokens (`DESIGN.md`)**: - Palm Oil (`HGU_SAWIT` / `SAWIT_HGU`): Stroke `#f59e0b` (Amber-500), Fill `rgba(245, 158, 11, 0.12)`. - Industrial Timber (`PBPH_HTI`): Stroke `#a855f7` (Purple-500), Fill `rgba(168, 85, 247, 0.12)`. - Natural Forest (`IUPHHK_HA` / `PBPH_HA`): Stroke `#3b82f6` (Blue-500), Fill `rgba(59, 130, 246, 0.12)`. - Conservation / National Park (`KONSERVASI`): Stroke `#10b981` (Emerald-500), Fill `rgba(16, 185, 129, 0.15)`. 4. **Lifecycle Functions**: - `addConcessionsLayers(map: MapLibreMap): void` - `setConcessionsVisibility(map: MapLibreMap, visible: boolean): void` ### Acceptance criteria - [x] Concession polygons render with distinct color matching concession type across zoom levels 5 to 14. - [x] Layer is inserted behind active fire clusters so fire markers remain prominent. - [x] Toggle visibility function integrates with `layer-toggles.tsx`. - [x] Unit tests verify layer specification structure and visibility toggling.
yuris changed title from Issue 38: [Frontend] Concession vector boundary & translucent fill layer (concessions-layer.tsx) to [Frontend] Concession vector boundary & translucent fill layer (concessions-layer.tsx) 2026-10-14 22:31:27 +00:00
yuris changed title from [Frontend] Concession vector boundary & translucent fill layer (concessions-layer.tsx) to Concession vector boundary & translucent fill layer (concessions-layer.tsx) 2026-10-14 22:38:32 +00:00
yuris changed title from Concession vector boundary & translucent fill layer (concessions-layer.tsx) to feat(map): concession vector boundary & translucent fill layer (concessions-layer.tsx) 2026-10-15 01:27:17 +00:00
yuris closed this issue 2026-10-15 03:04:03 +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#51
No description provided.