How I Built a Tsunami Simulator on Real Terrain with Mapbox and OpenStreetMap

Timati — Sun, 15 Nov 2026 16:58:26 +0000

Most disaster maps tell you where something did happen. I wanted one that answers a different question: what would happen on my street?

So I built HazardSim: you click a coastline, pick a wave height, and watch the water move inland over real terrain. It also does sea level rise and meteor impacts, and there are pages for earthquakes, hurricanes and volcanoes too.

This post is about how it works under the hood, and just as importantly, where it is wrong on purpose.

The data

Three public sources do most of the work:

Elevation: Mapbox Terrain-RGB tiles, at roughly 10 to 30 m resolution. Each pixel encodes a height in its RGB channels. The documented decoding is:

// Mapbox Terrain-RGB: height in metres
const height = -10000 + (R * 256 * 256 + G * 256 + B) * 0.1;

City boundaries: OpenStreetMap. When you click the map, the site finds the city under the cursor and outlines its real boundary. That polygon becomes the calculation area.
Population: OSM tags, with a manual density slider as a fallback when a place has no data.

The nice side effect of using real boundaries is that the output is not "a circle on a map". The flooded area respects the actual city limits.

The physics (intentionally simple)

I did not try to build a hydrodynamic solver. The rule is:

Water enters from the sea.
It floods every cell whose ground elevation is below the current water level.
Every 250 m of travel, the wave loses 1 m of height. This one number stands in for friction against terrain and buildings.

In pseudocode, the idea looks like this (a simplified illustration, not the production code):

// BFS flood from the coastline
queue = coastCells.map(c => ({ cell: c, level: waveHeight }));
while (queue.length) {
  const { cell, level } = queue.shift();
  if (ground(cell) >= level) continue;          // terrain blocks the water
  flooded.add(cell);
  const next = level - metresPerStep / 250;     // lose 1 m per 250 m
  for (const n of neighbours(cell)) {
    if (!flooded.has(n) && next > 0) queue.push({ cell: n, level: next });
  }
}

Hills, embankments and levees stop the wave, just as in reality. Water flows around obstacles and fills low ground, which is exactly what you want from a first-order tool.

Sea level rise uses the same engine but without the decay: the water simply sits at the chosen mark everywhere it can reach.

Meteors

The meteor is a body of stone, iron, ice or loose rubble at a chosen entry speed (17 km/s by default). Damage radii come from standard overpressure scaling, and the crater is roughly twenty times wider than the body itself. Unlike tsunamis, meteors have no coastline restriction: you can drop one anywhere on Earth.

One check I liked adding

Tsunamis and sea level rise need a coast, so before calculating, the site checks for open sea within about 30 km of your click, using the same elevation data. If there is none, it tells you instead of producing nonsense.

What it gets wrong (on purpose)

This is the part I care about most. The output is an order of magnitude, not a forecast:

A real tsunami depends on seafloor shape, the fault that moved, the tide and the time of day. The tool ignores all of that. It answers: if water of this height arrived here, how far inland would the terrain let it go?
Casualty numbers assume nobody evacuated, which never happens in real life.
The decay rule is a single constant, not a fluid simulation.

I would rather ship a simple model with honest labels than a flashy one that looks authoritative.

What I learned

The same wave height gives wildly different results depending on only a few metres of elevation. A 10 m wave barely troubles a city on high ground, while flat deltas are devastated. Seeing that on a map is more convincing than any table.

What is next

Earthquake, hurricane and volcano pages exist, and I recently added an ice age map showing the ocean 130 m lower than today. There is also an Android app on Google Play.

If you try it, I would love feedback, especially on the model and on places where the terrain or boundary data misbehaves: hazardsim.com.

Show Dev: CountryClue – A fast and minimalist world flag guessing game

Timati — Fri, 10 Jul 2026 21:41:43 +0000

Hi everyone! 👋 I’ve built CountryClue, a lightweight web game for guessing world flags.

I focused heavily on zero-dependency performance and smooth UI animations, trying to keep it as fast and clean as possible.

Please check out the game and let me know if the flag rendering feels instant on your device!

DEV Community: Timati