feat: vibe it up

Author: hrodmn

.github/workflows/deploy.yml

@@ -0,0 +1,42 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - run: npm ci
+
+      - run: npm run build
+
+      - uses: actions/configure-pages@v5
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+      - uses: actions/deploy-pages@v4
+        id: deployment

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

CLAUDE.md

@@ -0,0 +1,73 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Goal
+
+Create a minimal, beautiful map application showcasing [titiler-cmr](https://developmentseed.org/titiler-cmr)'s data rendering capability, hosted on GitHub Pages. The map should cover as much of the browser window as possible, with a default globe view, and expose basic controls like start/end datetime filtering.
+
+Key UX requirements:
+- Per-layer minimum zoom enforcement with a visual indicator prompting users to zoom in
+- Tile loading indicator (tile fetches can be slow)
+- Globe view as default projection
+
+## Tech Stack
+
+- **Build tool:** Vite
+- **Language:** TypeScript
+- **Mapping:** MapLibre GL JS (supports globe projection natively)
+- **Deployment:** GitHub Pages (static site, `gh-pages` branch)
+
+## Development Commands
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server
+npm run dev
+
+# Build for production (runs tsc then vite build)
+npm run build
+
+# Preview production build locally
+npm run preview
+
+# Deploy to GitHub Pages (builds then pushes dist/ to gh-pages branch)
+npm run deploy
+```
+
+## titiler-cmr API Integration
+
+The backend API is documented at https://developmentseed.org/titiler-cmr. Key endpoints used by this app:
+
+- **TileJSON:** `GET /{backend}/tilejson.json` — returns metadata including tile URL template; pass as a `raster-source` in MapLibre
+- **Tiles:** `GET /{backend}/tiles/{z}/{x}/{y}` — the actual tile imagery (`rasterio` backend for GeoTIFF/COG, `xarray` for NetCDF/HDF5)
+- **Granule search:** `GET /bbox/{minx},{miny},{maxx},{maxy}/granules` — find available granules in a bounding box
+
+Common query parameters for tile requests: `concept_id`, `datetime`, `assets`/`bands`, `rescale`, `colormap_name`.
+
+The hosted titiler-cmr instance URL should be stored in a single config constant (e.g., `src/config.ts`) so it can be easily swapped between environments.
+
+## Architecture
+
+Single-page static site, no server-side code. Globe projection via MapLibre GL JS v5 (`map.setProjection({ type: 'globe' })` called on `load`).
+
+```
+src/
+  config.ts       # TITILER_ENDPOINT, DatasetConfig/CollectionConfig/RenderConfig types, DATASETS array
+  main.ts         # Map init, wires controls → layers → zoom-guard → loading
+  controls.ts     # Dataset/Collection/Render selects + date picker; exports getState()
+  layers.ts       # updateLayer(): removes old source/layer, builds TileJSON URL, adds new raster source
+  loading.ts      # Shows #loading spinner on map `dataloading`, hides on `idle`
+  zoom-guard.ts   # Shows #zoom-guard message when zoom < collection.minzoom
+  style.css       # Full-viewport map, absolute-positioned overlay panels
+```
+
+### Adding a new dataset
+
+Add a new `DatasetConfig` entry to the `DATASETS` array in `src/config.ts`. No other code changes are needed. Each collection needs: `conceptId`, `assetsRegex`, `backend` (`rasterio` | `xarray`), `minzoom`/`maxzoom`, `defaultDate`, and a `renders` array of `RenderConfig` objects.
+
+### Layer update flow
+
+Controls emit a `ControlState` on any change → `updateLayer()` removes the previous `cmr-layer`/`cmr-source` and adds a new raster source pointing at the TileJSON endpoint with all render params encoded in the URL. MapLibre fetches TileJSON natively when `type: 'raster'` with a `url` field is used.

README.md

@@ -0,0 +1,72 @@
+# titiler-cmr Showcase
+
+A minimal map application showcasing [titiler-cmr](https://developmentseed.org/titiler-cmr)'s data rendering capability, hosted on GitHub Pages.
+
+## Features
+
+- Globe projection by default (MapLibre GL JS v5)
+- Tile loading indicator (tile fetches from titiler-cmr can be slow)
+- Per-layer minimum zoom enforcement with a visual prompt to zoom in
+- Dataset / collection / render switching with live tile updates
+- Date and date-range pickers
+- Advanced query parameter controls (cloud cover, orbit direction, etc.)
+- Mobile-friendly collapsible controls panel
+
+## Datasets
+
+| Dataset | Collections | Backend |
+|---|---|---|
+| HLS (Harmonized Landsat Sentinel-2) | HLSL30 (Landsat 8/9), HLSS30 (Sentinel-2) | rasterio |
+| NISAR Beta GCOV | NISAR L2 GCOV | xarray |
+| MUR Sea Surface Temperature | MUR SST | xarray |
+
+## Development
+
+```bash
+npm install
+npm run dev       # start dev server
+npm run build     # TypeScript check + Vite production build
+npm run preview   # preview production build locally
+npm run deploy    # build and push dist/ to gh-pages branch
+```
+
+## Architecture
+
+Single-page static site — no server-side code.
+
+```
+src/
+  config.ts       # TITILER_ENDPOINT, type definitions, DATASETS array
+  main.ts         # Map init; wires controls → layers → zoom-guard → loading
+  controls.ts     # Dataset/collection/render selects, date picker, extra params
+  layers.ts       # updateLayer(): removes old source/layer, builds TileJSON URL, adds raster source
+  loading.ts      # Shows spinner on map dataloading, hides on idle
+  zoom-guard.ts   # Shows message when zoom < collection.minzoom
+  style.css       # Full-viewport map, absolute-positioned overlay panels
+```
+
+The titiler-cmr endpoint is configured in `src/config.ts` as `TITILER_ENDPOINT`. Swap this value to point at a different environment.
+
+## Adding a Dataset
+
+Add a new `DatasetConfig` entry to the `DATASETS` array in `src/config.ts`. No other code changes are needed.
+
+Each `CollectionConfig` requires:
+
+| Field | Description |
+|---|---|
+| `collectionConceptId` | NASA CMR collection concept ID |
+| `backend` | `rasterio` (GeoTIFF/COG) or `xarray` (NetCDF/HDF5) |
+| `minzoom` / `maxzoom` | Zoom range for tile requests |
+| `date` | `{ mode: "single", default: "YYYY-MM-DD" }` or `{ mode: "range", default: ["YYYY-MM-DD", "YYYY-MM-DD"] }` |
+| `renders` | Array of `RenderConfig` objects (label, assets/variables, query params) |
+| `queryParams` | Optional extra controls: `range`, `select`, `text`, or `attribute` |
+
+A dataset with a single collection hides the collection selector in the UI. A dataset with multiple collections shows it.
+
+## Layer Update Flow
+
+1. Any control change calls `updateLayer(map, state)`.
+2. All previous CMR sources/layers (`cmr-0` … `cmr-7`) are removed.
+3. A TileJSON URL is built from the current state and added as a MapLibre `raster` source. MapLibre fetches the TileJSON natively and renders the tiles.
+4. Renders that define `subLayers` produce one map layer per sub-layer (used by NISAR to switch between frequency-A and frequency-B grids based on zoom level).

index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>titiler-cmr showcase</title>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <button id="controls-toggle" aria-label="Toggle controls" aria-expanded="false">☰</button>
+    <div id="controls"></div>
+
+    <div id="zoom-guard">Zoom in further to see data</div>
+
+    <div id="loading">
+      <div class="spinner"></div>
+      Loading tiles&hellip;
+    </div>
+
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>