Burn severity split-pane interactive comparison slider (`split-compare-slider.tsx`) #75

New issue

Closed

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

yuris commented

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

Owner

What to build

Build a draggable split-pane comparison slider in src/components/map/controls/split-compare-slider.tsx to contrast pre-fire basemap imagery against post-fire NBR burn scar overlays.

Technical specifications

Target files:
- src/components/map/controls/split-compare-slider.tsx: Draggable divider component.
Interactivity:
- Draggable horizontal handle splitting the WebGL canvas.
- Supports touch swipe gestures on mobile and mouse drag on desktop.

Acceptance criteria

Draggable divider splits map canvas smoothly at 60fps.
Left pane displays pre-fire state; right pane displays NBR burn severity.

Blocked by

Issue 57: [Backend] Normalized Burn Ratio (NBR & \Delta NBR) mathematical engine (nbr-calculator.ts).
Issue 60: [Frontend] False-color SWIR smoke-piercing raster tile layer (satellite-swir-layer.tsx).

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
Copernicus Sentinel-2 STAC API: Earth Search STAC API — AWS Element84 Sentinel-2 L2A STAC catalog.
Normalized Burn Ratio (NBR) Standard: USGS Landsat NBR — Formula: (B8 - B12) / (B8 + B12).
European Forest Fire Information System (EFFIS): EFFIS Burn Severity Classification — Delta-NBR fire damage scoring.
Open-Meteo GFS Global Forecast API: open-meteo.com/en/docs — Global 10m U/V wind velocity grids, relative humidity, and surface temperature.
NOAA GFS Models: NCEP GFS — Atmospheric advection modeling.

### What to build Build a draggable split-pane comparison slider in `src/components/map/controls/split-compare-slider.tsx` to contrast pre-fire basemap imagery against post-fire NBR burn scar overlays. ### Technical specifications 1. **Target files**: - `src/components/map/controls/split-compare-slider.tsx`: Draggable divider component. 2. **Interactivity**: - Draggable horizontal handle splitting the WebGL canvas. - Supports touch swipe gestures on mobile and mouse drag on desktop. ### Acceptance criteria - [x] Draggable divider splits map canvas smoothly at 60fps. - [x] Left pane displays pre-fire state; right pane displays NBR burn severity. ### Blocked by - Issue 57: [Backend] Normalized Burn Ratio (NBR & $\Delta NBR$) mathematical engine (`nbr-calculator.ts`). - Issue 60: [Frontend] False-color SWIR smoke-piercing raster tile layer (`satellite-swir-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) - **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/) - **Copernicus Sentinel-2 STAC API**: [Earth Search STAC API](https://earth-search.aws.element84.com/v1) — AWS Element84 Sentinel-2 L2A STAC catalog. - **Normalized Burn Ratio (NBR) Standard**: [USGS Landsat NBR](https://www.usgs.gov/landsat-missions/normalized-burn-ratio) — Formula: $(B8 - B12) / (B8 + B12)$. - **European Forest Fire Information System (EFFIS)**: [EFFIS Burn Severity Classification](https://effis.jrc.ec.europa.eu/) — Delta-NBR fire damage scoring. - **Open-Meteo GFS Global Forecast API**: [open-meteo.com/en/docs](https://open-meteo.com/en/docs) — Global 10m U/V wind velocity grids, relative humidity, and surface temperature. - **NOAA GFS Models**: [NCEP GFS](https://www.ncei.noaa.gov/products/weather-climate-models/global-forecast) — Atmospheric advection modeling.

yuris added this to the Satellite Smoke-Piercing & Burn Severity UI (Frontend) milestone

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

yuris added the

frontend

label

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

yuris changed title from ~~Issue 62: [Frontend] Burn severity split-pane interactive comparison slider (split-compare-slider.tsx)~~ to [Frontend] Burn severity split-pane interactive comparison slider (split-compare-slider.tsx)

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

yuris changed title from ~~[Frontend] Burn severity split-pane interactive comparison slider (split-compare-slider.tsx)~~ to Burn severity split-pane interactive comparison slider (split-compare-slider.tsx)

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

yuris referenced this issue from a pull request that will close it,

2026-10-16 05:09:06 +00:00

feat(map): burn severity split-pane comparison slider #138