FloodWatch Live — Real-time Flood Telemetry & Civic Disaster Map

1. Overview#

FloodWatch Live is a civic tech real-time flood monitoring and early warning dashboard engineered to provide citizens, first responders, and local disaster relief coordinators with instantaneous telemetry data during monsoon and flood events across Thailand.

The platform targets high-vulnerability disaster corridors, focusing on Prachuap Khiri Khan (Bang Saphan Basin) and Songkhla (Hat Yai Basin). Adhering to a strict Zero-mock Civic Data Policy, FloodWatch Live aggregates live telemetry directly from official hydrological monitoring stations and renders them onto smooth 60 FPS vector map tiles utilizing MapLibre GL JS and 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 Citizen / Community
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 Telemetry Endpoints (Gov Sensors)
8

9
    Note over User, Station: 1. Viewport Pan / Zoom Event
10
    User->>Browser: Pan to monitored region (Bang Saphan or Hat Yai)
11
    Browser->>Edge: Request station telemetry by Bounding Box (BBox)
12
    Edge->>Cache: Query Edge SWR Cache
13

14
    alt Cache Hit (Fresh Data < 60s)
15
        Cache-->>Browser: Return cached Telemetry GeoJSON (< 30ms)
16
    else Cache Miss / Stale
17
        Edge->>Station: Poll live hydrological sensor data (Zero-mock)
18
        Station-->>Edge: Return raw telemetry payload
19
        Edge->>Edge: Normalize schema & compute alert levels (Normal, Warning, Critical)
20
        Edge->>Cache: Update Edge SWR Cache
21
        Edge-->>Browser: Return validated GeoJSON FeatureCollection
22
    end
23

24
    Note over Browser, User: 2. WebGL Hardware-accelerated Rendering
25
    Browser->>Browser: Cluster station markers & update WebGL layer
26
    Browser-->>User: Render color-coded hazard indicators & telemetry trend charts

4. Key Engineering Highlights#

• Zero-Mock Civic Data Policy: Direct integration with live governmental telemetry endpoints across Prachuap Khiri Khan (Bang Saphan) and Songkhla (Hat Yai). No simulated data or mocks are used, ensuring genuine civic utility and trusted disaster awareness.
• OpenFreeMap & Vector Tile Rendering: Leveraged OpenFreeMap with MapLibre GL JS as an open-source, cost-free alternative to proprietary map services, eliminating billing surprises while maintaining 60 FPS hardware-accelerated WebGL vector rendering.
• Edge-powered SWR Ingestion: Deployed on Vercel Edge (sin1) with Stale-While-Revalidate (SWR) caching strategies (60s TTL), safeguarding public upstream APIs from downtime during sudden disaster-driven traffic surges.
• Thai River Basin GeoJSON & Viewport Optimization: Custom-tailored Thai hydrological GeoJSON polygons and real-time bounding-box spatial queries reduce network payloads by over 80% during user navigation.
• Automated Unit & Geo Testing: Validated coordinate transformations, status calculation algorithms, and SWR cache behavior through automated test suites in Vitest.

5. My Role & What I Built#

As the Full-stack & Geospatial Developer, I owned the project from conception to deployment:

• Interactive Map Engineering: Built the WebGL vector map frontend in Next.js and MapLibre GL JS, featuring custom layer styling, responsive telemetry cards, and dynamic marker clustering.
• Edge Telemetry Ingestion: Engineered the edge API pipeline on Vercel Edge, standardizing heterogenous civic sensor responses into uniform GeoJSON FeatureCollections.
• Geospatial & Performance Optimization: Implemented client-side bounding-box spatial queries and SWR caching headers to deliver instantaneous load times.
• Testing & Quality Assurance: Built Vitest suites ensuring data parser resilience against malformed upstream responses and network timeouts.

6. Result & Current State#

• Civic Tech Impact: Provides open, transparent, and mobile-responsive disaster telemetry for high-risk communities and relief organizations.
• Production Stability: Achieves high uptime and millisecond response times through edge caching, even under heavy regional traffic surges during flood incidents.

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