Flood hazard map for Davao City

A free flood hazard map for Davao City.

How deep water is expected to get in each barangay during a storm of a given severity — for an ordinary flood, a bad one, and the worst one in the model.

[!IMPORTANT] DavFlood is a hazard map, not a flood sensor. It shows modelled risk, not water on the ground right now. For live warnings, follow PAGASA and your barangay's DRRM office.

What it shows

Three scenarios. The 5, 25 and 100-year return periods from the UP NOAH model. Switching between them changes the whole reading, so the panel leads with the consequence rather than the label: about 73 km² of Davao City floods in a 25-year storm, split across the three depth bands by area and share.

Depth, in words as well as colour. Ankle-to-knee, waist-to-chest, above-head-height — every zone carries its band in text, because roughly 8% of men have a colour vision deficiency and this is safety information, not decoration. Tap a zone for its expected depth, what it looks like at your front door, and what to do.

183 barangays, searchable. Pick one and the map flies to it and drops a pin, rather than leaving you to find it by panning a city 53 km across.

Depth in 3D. Zones stand up by their expected depth over real terrain, so a tilted view reads as volumes of water rather than flat paint.

Live conditions

Three signals sit alongside the hazard model. None of them claims anywhere is flooded — that is a statement about the present that no model can make without an observer, and inventing it would undo the one thing this app is for.

Rain falling now. A toggleable layer of ~8 km cells coloured by intensity, using PAGASA's own mm/h bands so the legend agrees with the advisory on the radio. Deliberately square and coarse: that is the weather model's real resolution, and a smooth heatmap would imply street-level precision that does not exist. Blue-to-violet, never the hazard ramp.

The river. GloFAS forecasts discharge from rainfall over the whole catchment, so it sees water that fell upstream hours ago and is still on its way down — the case local rainfall cannot cover, and the one that matters here. Reported against five years of daily history, as a multiple of the median.

In the news. Recent flooding coverage for Davao City, refreshed by CI every half hour into a file the site serves itself. Headlines are shown as published, attributed and dated, never summarised — an app that paraphrases a flood report has invented a source.

Workspaces

api/
  news.ts     the one server-side thing — /api/news, a Vercel function
apps/
  web         the app — TanStack Start (SPA + prerender), MapLibre GL
packages/
  hazard      domain: hazard tiers, geography, barangays, map style, weather, data
  config      shared tsconfig base

@davflood/hazard is the single source of truth for the domain: the UP NOAH hazard classification, the design tokens, the map style and the attribution text. Safety and licence copy lives there so it stays in one place rather than scattered through the UI.

Getting started

pnpm install
pnpm dev      # the app -> http://localhost:3001

Data

The hazard polygons are the real UP NOAH flood hazard model for Davao del Norte, clipped to Davao City — the 5, 25 and 100-year return periods, under ODC-ODbL.

Source: Project NOAH hazard maps, per-province ESRI shapefiles. Already WGS84, with a single Var attribute (1 = low, 2 = medium, 3 = high) matching the tiers in packages/hazard/src/tiers.ts.

# rebuild from the shapefiles — download and unzip Flood/{5yr,25yr,100yr}/DavaoDelNorte.zip
pnpm --filter @davflood/hazard exec tsx scripts/build-noah-data.ts <dir>

pnpm validate:style    # validate every map style variant against the MapLibre spec

build-noah-data.ts carries its own shapefile reader, so no GDAL is needed. It simplifies to ~22 m and drops fragments under 0.25 ha — the raw export is raster-derived and otherwise runs to 40,000 sliver polygons and 32 MB.

generate-synthetic.ts still exists as a schema reference and fallback, but refuses to run without --force: it would overwrite real hazard information with invented shapes.

It is still a model. Real data means the polygons come from the national hazard assessment — not that they describe water on the ground right now. Barangay attribution on a tapped zone is nearest-centroid against the unsurveyed coordinates in barangays.ts, so it can be wrong near boundaries; the geometry and depth bands are not.

News

pnpm --filter @davflood/hazard exec tsx scripts/build-flood-news.ts apps/web/public/flood-news.json

Seeds or repairs the committed file by hand. The deployed site does not need it: /api/news (server/news.ts, bundled to api/news.js by pnpm build:api) fetches the same sources when someone asks, behind a half-hour CDN cache, so nothing has to be committed to keep the news current.

It cannot be done from the browser — none of the sources send access-control-allow-origin, and GDELT rate-limits hard — so something server-side has to fetch them. The only question was whether that something writes to git every half hour or answers a request; s-maxage means one visitor per half hour actually reaches the function, which is the same traffic a cron job would have sent.

The function runs a shallow sweep (~4s: the publishers' feeds and one Google News query, in parallel) and merges it on top of the committed file, which carries the two-month history the shallow sweep cannot reach. The CLI above is the deep one — overlapping date windows plus a query per flood-prone barangay, ranked from the hazard model. ReliefWeb joins in if RELIEFWEB_APPNAME is set; its API refuses unregistered callers.

This is the beginning of the README. Read the rest at the original. Read the full README ↗