FloodWatch Live — แดชบอร์ดติดตามน้ำท่วมและภัยพิบัติเรียลไทม์

1. Overview#

FloodWatch Live คือแพลตฟอร์ม Civic Tech ด้านการเฝ้าระวังและเตือนภัยพิบัติน้ำท่วมแบบเรียลไทม์ ออกแบบขึ้นเพื่อเป็นศูนย์กลางข้อมูลสำหรับประชาชน อาสาสมัครกู้ภัย และชุมชนท้องถิ่น ในการติดตามสถานการณ์ระดับน้ำในลำน้ำ ปริมาณฝนสะสม และแนวโน้มความเสี่ยงอุทกภัยได้อย่างแม่นยำและทันท่วงที

ระบบมุ่งเน้นการตรวจวัดในพื้นที่จุดเสี่ยงภัยสำคัญระดับประเทศ ได้แก่ ประจวบคีรีขันธ์ (ลุ่มน้ำบางสะพาน) และ สงขลา (ลุ่มน้ำหาดใหญ่) โดยดำเนินนโยบาย Zero-mock Civic Data ดึงข้อมูลโดยตรงจากเครือข่ายเซนเซอร์โทรมาตรของหน่วยงานภาครัฐจริง นำมารวมและเรนเดอร์ลงบนแผนที่เวกเตอร์เชิงโต้ตอบความเร็วสูง (High-performance Vector Tiles) ด้วย MapLibre GL JS และ OpenFreeMap

2. Stories & Visual Tour#

3. Architecture & Workflows#

1
flowchart TB
2
    subgraph Client["Client Tier (MapLibre GL JS & React)"]
3
        UI_MAP["Interactive Vector Map\n(OpenFreeMap Style / WebGL Layer)"]
4
        UI_HUD["Telemetry HUD & Metrics Panel\n(Water Height, Discharge Rate, Status)"]
5
        UI_GEO["GeoJSON Spatial Layer\n(Thai River Basins & Critical Zones)"]
6
    end
7

8
    subgraph Edge["Edge Ingestion & Caching (Vercel Edge sin1)"]
9
        INGEST["Telemetry Poller & Normalizer\n(Zero-mock External Ingestion)"]
10
        CACHE["Edge SWR Cache (60s TTL)\n(Protects Upstream Origin Limits)"]
11
        SPATIAL["Bounding-Box Spatial Filter\n(Dynamic Point Clustering)"]
12
    end
13

14
    subgraph Upstream["Civic Telemetry & Tile Infrastructure"]
15
        SENSORS_BS["Bang Saphan Hydrological Stations\n(Prachuap Khiri Khan Telemetry)"]
16
        SENSORS_HY["Hat Yai Drainage Sensor Network\n(Songkhla Basin Telemetry)"]
17
        TILE_SERVER["OpenFreeMap Global Vector Tiles\n(Zero-cost, Zero-rate-limit Base Map)"]
18
    end
19

20
    Upstream --> INGEST
21
    TILE_SERVER --> UI_MAP
22
    INGEST --> CACHE
23
    CACHE --> SPATIAL
24
    SPATIAL --> Client

1
sequenceDiagram
2
    autonumber
3
    actor User as ผู้ใช้งาน / ชุมชน
4
    participant Browser as FloodWatch Client (MapLibre)
5
    participant Edge as Vercel Edge API (sin1)
6
    participant Cache as Edge Cache (SWR 60s)
7
    participant Station as เซนเซอร์โทรมาตร (Gov Telemetry)
8

9
    Note over User, Station: 1. เคลื่อนย้ายมุมมองแผนที่ (Pan / Zoom Viewport)
10
    User->>Browser: เลื่อนดูพื้นที่ (เช่น บางสะพาน หรือ หาดใหญ่)
11
    Browser->>Edge: Request ข้อมูลสถานีตาม Bounding Box (BBox)
12
    Edge->>Cache: ตรวจสอบข้อมูลใน Edge SWR Cache
13

14
    alt Cache Hit (ข้อมูลยังสดใหม่ < 60 วินาที)
15
        Cache-->>Browser: ส่ง Telemetry GeoJSON กลับทันที (< 30ms)
16
    else Cache Miss หรือ Stale
17
        Edge->>Station: ดึงข้อมูลระดับน้ำและปริมาณฝนจริง (Zero-mock)
18
        Station-->>Edge: ตอบกลับ Raw Telemetry Payload
19
        Edge->>Edge: ทำ Data Normalization และประเมิน Warning Level
20
        Edge->>Cache: อัปเดตข้อมูลลง Edge SWR Cache
21
        Edge-->>Browser: ส่ง GeoJSON FeatureCollection กลับไปยัง Client
22
    end
23

24
    Note over Browser, User: 2. เรนเดอร์บน WebGL Vector Layer
25
    Browser->>Browser: คลัสเตอร์และเรนเดอร์หมุดสถานีตามระดับการเตือนภัย
26
    Browser-->>User: แสดงหมุดสีเตือนภัย พร้อมกราฟแนวโน้มระดับน้ำและค่าสถิติ

4. Key Engineering Highlights#

• Zero-Mock Civic Data Policy: ยึดมั่นในการใช้ข้อมูลจริง 100% จากสถานีโทรมาตรตรวจวัดทางอุทกวิทยาของหน่วยงานภาครัฐในพื้นที่ประจวบคีรีขันธ์ (บางสะพาน) และสงขลา (หาดใหญ่) ไม่ใช้ข้อมูล Mock จำลอง เพื่อให้ข้อมูลมีความน่าเชื่อถือสูงสุดในการเตือนภัย
• OpenFreeMap & Ultra-fast Vector Tiles: เลือกใช้ OpenFreeMap ร่วมกับ MapLibre GL JS แทนการพึ่งพาบริการแผนที่เชิงพาณิชย์ที่มีลิมิตและค่าใช้จ่ายสูง ทำให้ระบบสามารถรองรับผู้ใช้งานจำนวนมากได้โดยไม่มีค่าบริการแฝง และเรนเดอร์ Vector Tiles ด้วย WebGL ที่เฟรมเรต 60 FPS อย่างลื่นไหล
• Edge-powered SWR Telemetry Ingestion: พัฒนาระบบ Ingestion บน Vercel Edge (sin1) พร้อมกลไก Stale-While-Revalidate (SWR) ป้องกันปัญหา Server ของหน่วยงานต้นทางล่มจากปริมาณ Request มหาศาลระหว่างเกิดภัยพิบัติ
• Optimized Thai GeoJSON & Spatial Clustering: ออกแบบโครงสร้าง Thai GeoJSON ของลุ่มน้ำและสถานีตรวจวัด พร้อมคำนวณ Spatial Bounding Box คัดกรองข้อมูลเฉพาะพื้นที่ที่ปรากฏบนหน้าจอ ช่วยลดขนาด Network Payload ได้มากกว่า 80%
• Rigorous Test Validation: ตรวจสอบความถูกต้องของโมดูลคำนวณสถานะเตือนภัย (Normal, Warning, Critical) และการแปลงพิกัดภูมิศาสตร์ผ่านชุดทดสอบ Vitest อัตโนมัติ

5. My Role & What I Built#

ในฐานะ Full-stack & Geospatial Developer ผมรับผิดชอบการออกแบบและพัฒนาระบบทั้งหมด:

• Map & UI Engineering: พัฒนา Interactive Map บน Next.js, React และ MapLibre GL JS ออกแบบ Custom Map Style, Vector Layer และแผง Telemetry HUD
• Edge Backend & Data Normalizer: พัฒนา Data Pipeline บน Vercel Edge สำหรับรวบรวมข้อมูลโทรมาตร แปลงข้อมูลดิบจากหน่วยงานรัฐให้อยู่ในรูปแบบ GeoJSON มาตรฐาน และตั้งค่า Cache-Control Headers
• Geospatial Optimization: ออกแบบระบบ Bounding-Box Filtering และ Point Clustering เพื่อการแสดงผลจุดวัดระดับน้ำอย่างมีประสิทธิภาพสูงสุด
• Reliability Testing: พัฒนาชุดทดสอบ Vitest เพื่อการันตีความถูกต้องของตรรกะการวิเคราะห์ระดับน้ำและการจัดการข้อมูลพิกัด

6. Result & Current State#

• Civic Tech Impact: สร้างเครื่องมือติดตามภัยพิบัติที่มีประสิทธิภาพสูง เปิดกว้าง และเข้าถึงง่ายสำหรับประชาชนในพื้นที่เสี่ยงภัย
• High Availability: ระบบทำงานแบบ Zero-downtime โดยสถาปัตยกรรม Edge Caching ช่วยปกป้อง API ต้นทางและตอบสนองข้อมูลได้รวดเร็วภายในเวลาไม่กี่มิลลิวินาที

7. Demo & Code#

• Production Live (เข้าใช้งานได้จริง): flood-watch-live.vercel.app
• GitHub (Private Repository): Manchinn/flood-watch-live
• Architecture: Next.js + MapLibre GL JS + OpenFreeMap + Vercel Edge (sin1) + Telemetry APIs
• Deployment Target: Vercel Edge Network