DavFlood
Back to works

Project Case Study

DavFlood

DavFlood is a free flood hazard map for Davao City that turns national hazard models into barangay-level answers anyone can read.

TanStack StartMapLibre GLTypeScriptProject NOAHOpen-Meteo

Overview

DavFlood is a free, open-source flood hazard map for Davao City and Davao del Norte. It visualizes modeled flood risk across 5, 25, and 100-year storm severities, letting residents check exposure street by street or browse it summarized per barangay.

The Problem

Authoritative flood hazard data for the Philippines already exists — Project NOAH modeled it years ago. The problem is reach. It lives in formats built for planners and GIS specialists: heavy datasets, technical portals, and legends that assume you already know what a "100-year return period" means. A resident deciding whether to evacuate, or a family deciding where to rent, has no practical way to use it.

The Solution

DavFlood clips the national hazard model to Davao, renders it as a fast interactive map, and pairs it with plain-language explanations of what each hazard tier actually means for a household. No account, no cost, no GIS knowledge required — open it and find your barangay.

Why DavFlood

  • Local: Scoped tightly to Davao City and Davao del Norte instead of burying the region in a national dataset.
  • Legible: Hazard tiers are explained in everyday terms, not just color-coded on a legend.
  • Granular: Risk is browsable per barangay, matching how people actually describe where they live.
  • Open: Free to use, open-source, and built entirely on public data.

How It Works

  1. Explore the map Pan and zoom an interactive hazard layer rendered with MapLibre GL, switching between 5, 25, and 100-year storm severities to compare scenarios.
  2. Check a barangay Skip the map entirely and look up hazard exposure by name, with each barangay summarized at a glance.
  3. Understand the levels A dedicated guide breaks down what low, medium, and high hazard classifications mean in practice — and what the model does and doesn't account for.

Technical Notes

Built on TanStack Start as a prerendered SPA with no server backend — hazard data is either bundled at build time or fetched client-side from public APIs, so the whole app deploys as static files. Domain logic, map styling, and hazard classification tiers live in a single shared @davflood/hazard package, keeping the map and the barangay views provably consistent with one another.

Data comes from the Project NOAH flood hazard model (UP NOAH) clipped to Davao, with elevation from Phil-LiDAR / AWS Terrain Tiles, live rainfall from Open-Meteo, and base map data from OpenStreetMap.

Outcome

DavFlood makes flood risk information that was already public, actually usable — turning a specialist dataset into a tool a Davao resident can open on their phone and read in under a minute.