diff --git a/README.md b/README.md
index 8385fbb..1d6818f 100644
--- a/README.md
+++ b/README.md
@@ -38,10 +38,10 @@ background in [Teaching a Model to See the Ping River Rise 13 Hours Early](https
3.70 m. Everything about the model, including what did not work:
[docs/FLOOD_FORECASTING.md](docs/FLOOD_FORECASTING.md).
- **Shows it.** One screen: Chiang Mai's flood verdict, the gauges with their status
- and trend, a self-hosted map of the basin with rain and the city's inundation
- zones, and a panel per station with its history since 2018, the forecast and how
- accurate it has been. ThaiWater's basin stations, a replay of the 2024 flood,
- Thai/English, dark/light.
+ and trend, a self-hosted map of the basin with rain, the city's flood zones and
+ the high-water marks of 2024, and a panel per station with its history since
+ 2018, the forecast and how accurate it has been. ThaiWater's basin stations, a
+ replay of the 2024 flood, Thai/English, dark/light.
- **Notifies.** Public push alerts over a self-hosted [ntfy](https://ntfy.sh): one
message when a gauge crosses its warning or danger level, one all-clear on the
way down, an opt-in early-warning topic from the model, nothing in between.
diff --git a/docs/DASHBOARD_REDESIGN.md b/docs/DASHBOARD_REDESIGN.md
index 821c0e5..e298ccd 100644
--- a/docs/DASHBOARD_REDESIGN.md
+++ b/docs/DASHBOARD_REDESIGN.md
@@ -51,7 +51,7 @@ One screen, no page scroll on a desktop:
|---|---|
| Top bar | brand · **Chiang Mai verdict** (P.1 level + 24 h forecast, always visible, click selects P.1) · gauges reporting · highest 24 h flood chance · data age · EN/ไทย · light/dark · Get alerts |
| Left | two lists: **RID gauges** (status bar, code, name, margin to the warning level, 72 h sparkline, level and 6 h change; sort by river order, closest to the warning level, rising) and **Basin stations** (ThaiWater/HII: % of bank height, river and agency; sort fullest first or by name); filter; legend |
-| Centre | map on a self-hosted vector basemap (labels in the page language): Ping mainstem and tributaries, gauges coloured by status with code + level labels, layers Basin stations (diamonds), Rain 24 h and Flood zones, the team's markers from zoom 12, one legend |
+| Centre | map on a self-hosted vector basemap (labels in the page language): Ping mainstem and tributaries, gauges coloured by status with code + level labels, layers Basin stations (diamonds), Rain 24 h, Flood zones and Flood marks 2024, the team's markers from zoom 12, one legend |
| Right | selected RID gauge: level, 6 h change, discharge, warning/danger level with margins, capacity; level scale with now and 24 h peak; history (3 d / 7 d / 30 d / 90 d / 1 y / all or dates: level, discharge, the 24 h peaks as issued, warning/danger bands, hover values; up to 7 d it ends in the current forecast); forecast table (peak, chance of warning/danger at 6/12/24 h, model, issue time, disclaimer); for P.1 the five city flood stages, the zones toggle and "How accurate is the forecast?"; data links. A basin station shows level (m MSL), % of bank height with ThaiWater's class, distance to and height of the bank top, gauge reading, agency (latest reading only: no history is kept for them) |
| Status bar | data credits, "2.7M readings since 2018" (opens the data statistics), API, source code |
@@ -115,6 +115,7 @@ One screen, no page scroll on a desktop:
- **Forecast accuracy:** loaded when the section is opened (a cold `/api/forecast/skill` query takes up to 20 s), cached for 15 minutes; bias and persistence error are in each row's tooltip.
- **Replay of October 2024:** `src/static/flood-2024-all.json` (hourly readings of the 16 gauges, 15 September – 12 October 2024, and the 24 h warning chance and peak of a model trained on data before 1 September 2024). The page's clock, verdict, list, markers, flood zones and panel follow the replay; the panel's chart shows the season on fixed axes up to the replay hour. It plays hour by hour while the model alerts or P.1 is above 3.50 m, faster through quiet days, and can be paused and dragged. Rain, the basin stations and the 5-minute refresh are off during the replay, since they are today's data. A violet bar (REPLAY, date, P.1 level, the model's message) and the top bar's "Replay time" replace the live data age.
- **Simulation:** `?demo_level=4.4` pins P.1 at 4.40 m; `?demo_rise=1` raises it by 5 cm every 0.7 s from the real level to the 2024 record (5.30 m). An amber SIMULATION bar names the real level; the top bar and the P.1 panel say "simulated". Only P.1 is simulated: the forecasts and other gauges stay live.
+- **Flood marks 2024:** `src/static/flood-marks-2024.json`, CMU Water Center's ~4,900 marks of the October 2024 high-water line (depth above the road at P.1 5.30 m; `scripts/build_flood_marks.py`), on a canvas from zoom 12 in CMU's five depth classes; turning the layer on below zoom 12 flies to the city. A mark's popup gives the depth and its flood zone; zone and marker popups name the nearest mark within 250 m (the marks load with the zones). Off by default; also available in the replay, since it is 2024 data. Popups pan clear of the layer bar, which wraps to two rows on phones.
- **Basemap:** `src/static/basemap/ping-basin.pmtiles`, a Protomaps extract (bbox 97.85–99.95 E, 16.85–20.2 N, zoom 0–12, 15 MB, OpenStreetMap data), drawn by protomaps-leaflet 5.1.0 in its `light`/`dark` style with `name:th`/`name:en` labels. Refresh instructions in `src/static/basemap/README.md`. The map cannot be panned far outside the basin. OSM raster tiles are the fallback if the renderer does not load.
## Phases
diff --git a/docs/DATA_SOURCES.md b/docs/DATA_SOURCES.md
index 97b6b09..794f750 100644
--- a/docs/DATA_SOURCES.md
+++ b/docs/DATA_SOURCES.md
@@ -250,7 +250,12 @@ and the province). A Next.js app; its data paths are in the page chunks
(`uv run scripts/build_flood_zones.py`).
- **Flood marks 2024** — `/data/New_floodMark_2025_fixed_like_pole.geojson` (4.9 MB):
4,869 points in Chiang Mai and Lamphun with the October 2024 depth above the road
- in cm (P.1 = 5.30 m), the marker's place and type.
+ in cm (P.1 = 5.30 m), the marker's place and type. **In use:** the dashboard's
+ "Flood marks 2024" layer, `src/static/flood-marks-2024.json` (position and depth
+ only, 110 KB; `uv run python scripts/build_flood_marks.py`). The depth does not
+ scale one-to-one with P.1: marks in the zone that floods only at 5.30 m stood a
+ median 65 cm deep in 2024, so the site shows the 2024 depth and no estimate for
+ other levels.
- **Flood poles** — `/data/PoleCNX2025_v2.geojson`: 219 poles with ground level and
maximum flood level (m MSL) and the depth.
- **City-reach gauges** (station page): P.67, P.103, P.1, P.104 (RID, `ST.16`
@@ -279,7 +284,8 @@ and the province). A Next.js app; its data paths are in the page chunks
| Open-Meteo rain | ✅ Hourly by ping-collector → `openmeteo_rain` (5 catchment points, past 5 days + 48 h forecast); the 2021+ archive trains the hgb-v3 rain features | — |
| HII API key (dams, forecasts) | ❌ | Contact HII for sanctioned access |
| CMU CMFlood flood map (2024) | ✅ Static (2026-10-25): P.1 stages and the city's flood zones | Rebuild with `scripts/build_flood_zones.py` if CMU revises the map |
-| CMU CMFlood marks, poles, city gauges | ❌ | See 5.1 |
+| CMU CMFlood flood marks 2024 | ✅ Static (2026-10-25): dashboard layer, nearest mark in zone and marker popups | Rebuild with `scripts/build_flood_marks.py` |
+| CMU CMFlood poles, city gauges | ❌ | See 5.1 |
**Collector configuration** (ping-collector): HII, the dams and Open-Meteo are
fetched once per clock hour, also while RID is being retried; one-shot via
diff --git a/scripts/build_flood_marks.py b/scripts/build_flood_marks.py
new file mode 100644
index 0000000..f51cc40
--- /dev/null
+++ b/scripts/build_flood_marks.py
@@ -0,0 +1,71 @@
+"""Build src/static/flood-marks-2024.json from CMU Water Center's flood marks.
+
+After the October 2024 flood (P.1 peaked at 5.30 m on 5 October), CMU Water
+Center marked the high-water line at about 5,000 places in Chiang Mai and
+Lamphun (CMFlood, "Flood marks 2024"): the depth above the road surface, in
+cm. This keeps position and depth only, in a compact array form:
+
+ uv run python scripts/build_flood_marks.py # fetch from CMU
+ uv run python scripts/build_flood_marks.py --geojson F # or a saved copy
+"""
+
+import argparse
+import json
+import urllib.request
+from pathlib import Path
+
+REPO = Path(__file__).resolve().parents[1]
+OUT = REPO / "src" / "static" / "flood-marks-2024.json"
+URL = "https://watercenter.cmu.ac.th/data/New_floodMark_2025_fixed_like_pole.geojson"
+SOURCE = (
+ "CMU Water Center (ศูนย์วิชาการสนับสนุนการบริหารจัดการน้ำ มหาวิทยาลัยเชียงใหม่), "
+ "flood marks of October 2024, "
+ "https://watercenter.cmu.ac.th/chiangmai/cmflood/warning/floodmark"
+)
+
+
+def load(path: Path | None) -> dict:
+ if path:
+ return json.loads(path.read_text(encoding="utf-8"))
+ req = urllib.request.Request(URL, headers={"User-Agent": "Mozilla/5.0"})
+ with urllib.request.urlopen(req, timeout=120) as r:
+ return json.loads(r.read().decode("utf-8"))
+
+
+def main() -> None:
+ ap = argparse.ArgumentParser(description=__doc__.splitlines()[0])
+ ap.add_argument("--geojson", type=Path, help="read CMU's GeoJSON from here")
+ args = ap.parse_args()
+
+ marks, skipped = [], 0
+ for f in load(args.geojson)["features"]:
+ p = f.get("properties") or {}
+ lon, lat, depth = p.get("longitude"), p.get("latitude"), p.get("water_level")
+ if lon is None or lat is None or depth is None:
+ skipped += 1
+ continue
+ # 18-19.5 N, 98.5-99.5 E: a swapped or empty coordinate is skipped
+ if not (18.0 < lat < 19.5 and 98.5 < lon < 99.5) or depth <= 0:
+ skipped += 1
+ continue
+ marks.append([round(lon, 5), round(lat, 5), round(depth)])
+ marks.sort(key=lambda m: (m[1], m[0]))
+ doc = {
+ "source": SOURCE,
+ "p1_level": 5.30,
+ "date": "2024-10-05",
+ "fields": ["lon", "lat", "depth_cm_above_road"],
+ "marks": marks,
+ }
+ OUT.write_text(
+ json.dumps(doc, ensure_ascii=False, separators=(",", ":")) + "\n",
+ encoding="utf-8",
+ )
+ print(
+ f"wrote {OUT.relative_to(REPO)}: {len(marks)} marks, {skipped} skipped, "
+ f"{OUT.stat().st_size / 1024:.0f} KB"
+ )
+
+
+if __name__ == "__main__":
+ main()
diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index 9aede31..bc06a7a 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -188,6 +188,7 @@
.st-label::before { display: none; }
[data-theme="dark"] .st-label { color: #e6eaf0; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000; }
.layers { position: absolute; z-index: 800; right: 12px; top: 12px; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
+ .layers { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 64px); }
.layers button { padding: 5px 10px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.layers button::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--line-2); }
.layers button[aria-pressed="true"] { color: var(--text); }
@@ -404,6 +405,7 @@
Basin stations
Rain 24 h
Flood zones
+ Flood marks 2024
@@ -431,6 +433,15 @@
Zone 5 last River at or above the zone's level
+
+ Flood marks 2024
+ Depth above the road, cm: 0–40 41–80 81–120 121–160 > 160
@@ -482,7 +493,7 @@
'use strict';
const $ = (id) => document.getElementById(id);
const state = { lang: 'th', stations: [], byCode: new Map(), selected: null, sort: 'river', map: null, tiles: null, markers: new Map(),
- rivers: null, riverLayer: null, rain: [], rainLayer: null, zones: null, zoneLayer: null, zonesUserHidden: false, fitted: false,
+ rivers: null, riverLayer: null, rain: [], rainLayer: null, zones: null, zoneLayer: null, zonesUserHidden: false, marks: null, markLayer: null, fitted: false,
p1Stages: null, alerts: null, lastLoad: null, tab: 'rid', bsort: 'bank', basin: [], basinById: new Map(), basinOn: false,
basinLayer: null, basinMarkers: new Map(), pois: null, poiLayer: null,
mode: 'live', live: [], replay: null, replayData: null, simLevel: null, simRise: false, simTimer: null,
@@ -551,6 +562,15 @@
'layer.group': 'Map layers',
'layer.rain': 'Rain 24 h',
'layer.zones': 'Flood zones',
+ 'layer.marks': 'Flood marks 2024',
+ 'legend.marks.unit': 'Depth above the road, cm:',
+ 'mark.title': 'Flood mark, October 2024',
+ 'mark.depth': (cm) => `${cm} cm above the road`,
+ 'mark.p1': 'The high-water line of the 2024 flood, when P.1 stood at 5.30 m (the record).',
+ 'mark.nozone': 'Outside the mapped zones',
+ 'mark.near': 'Flood mark 2024 nearby',
+ 'mark.near.value': (cm, m) => `${cm} cm, ${m} m away`,
+ 'mark.source': 'Surveyed by CMU Water Center',
'map.aria': 'Map of the Ping River gauges',
'detail.aria': 'Selected gauge',
'error.load': (msg) => `The data could not be loaded (${msg}). The page retries every 5 minutes.`,
@@ -810,6 +830,15 @@
'layer.group': 'ชั้นข้อมูลแผนที่',
'layer.rain': 'ฝน 24 ชม.',
'layer.zones': 'พื้นที่น้ำท่วม',
+ 'layer.marks': 'คราบน้ำท่วม 2567',
+ 'legend.marks.unit': 'ความสูงน้ำจากผิวถนน (ซม.):',
+ 'mark.title': 'เครื่องหมายระดับน้ำท่วม ตุลาคม 2567',
+ 'mark.depth': (cm) => `สูงจากผิวถนน ${cm} ซม.`,
+ 'mark.p1': 'ระดับน้ำท่วมสูงสุดปี 2567 ขณะที่ P.1 อยู่ที่ 5.30 ม. (สูงสุดเป็นประวัติการณ์)',
+ 'mark.nozone': 'อยู่นอกพื้นที่ที่ทำแผนที่ไว้',
+ 'mark.near': 'คราบน้ำท่วม 2567 ใกล้เคียง',
+ 'mark.near.value': (cm, m) => `${cm} ซม. ห่าง ${m} ม.`,
+ 'mark.source': 'สำรวจโดย ศูนย์วิชาการสนับสนุนการบริหารจัดการน้ำ มช.',
'map.aria': 'แผนที่สถานีวัดน้ำแม่น้ำปิง',
'detail.aria': 'สถานีที่เลือก',
'error.load': (msg) => `โหลดข้อมูลไม่สำเร็จ (${msg}) หน้านี้จะลองใหม่ทุก 5 นาที`,
@@ -1538,17 +1567,21 @@
// ---- Map ------------------------------------------------------------
function initMap() {
if (!window.L) throw new Error(t('error.leaflet'));
+ // pan popups clear of the layer bar, which wraps to two rows on phones
+ L.Popup.mergeOptions({ autoPanPaddingTopLeft: L.point(12, 100) });
const map = L.map('map', { zoomControl: true, attributionControl: true, minZoom: 8, maxZoom: 16,
maxBounds: [[16.3, 97.2], [20.7, 100.6]], maxBoundsViscosity: 0.7 }).setView([18.75, 98.95], 9);
map.createPane('zones').style.zIndex = 380;
map.createPane('rivers').style.zIndex = 390;
map.createPane('rain').style.zIndex = 420;
+ map.createPane('marks').style.zIndex = 430;
map.createPane('basin').style.zIndex = 440;
map.createPane('pois').style.zIndex = 445;
map.createPane('gauges').style.zIndex = 450;
state.map = map;
setBasemap();
map.on('zoomend', syncPois);
+ map.on('zoomend', syncMarks);
}
// The basemap is a Protomaps extract of the Ping basin served by this
@@ -1723,6 +1756,7 @@
body = `${escapeHtml(t('poi.zone'))} ${escapeHtml(t('poi.zone.value', zone.properties.zone, Number(zone.properties.level).toFixed(2)))}
${escapeHtml(t('zone.chance24'))} ${st ? pct(st.p_exceed) : '–'}
CMU Water Center ';
+ async function loadMarks() {
+ if (!state.marks) state.marks = await json(fetch('/static/flood-marks-2024.json')).then((d) => (Array.isArray(d.marks) ? d.marks : null)).catch(() => null);
+ return state.marks;
+ }
+ // the closest mark within maxM metres (marks are [lon, lat, cm])
+ function nearestMark(lat, lon, maxM) {
+ if (!state.marks) return null;
+ const kx = 111320 * Math.cos((lat * Math.PI) / 180), ky = 110540;
+ let best = null, bestD = maxM;
+ state.marks.forEach((m) => {
+ const d = Math.hypot((m[0] - lon) * kx, (m[1] - lat) * ky);
+ if (d < bestD) { bestD = d; best = m; }
+ });
+ return best ? { cm: best[2], m: bestD } : null;
+ }
+ function nearMarkHtml(lat, lon) {
+ const near = nearestMark(lat, lon, 250);
+ if (!near) return '';
+ return `${escapeHtml(t('mark.near'))} ${escapeHtml(t('mark.near.value', near.cm, Math.max(10, Math.round(near.m / 10) * 10)))}