The timeline and the map of September 11, 2001 as one synchronized view —
timeline.of911.org and
map.of911.org merged so a single clock and a single
event set drive both.
- The timel.in timeline along the bottom is the shared clock and the index of the day's 42 events (swimlanes by thread or by phase).
- The MapLibre map above is the geography — the four flights as timed tracks whose planes move and trails grow, the places they struck, the people and where they were, and President Bush's Air Force One odyssey across the country.
- One cursor drives both. Scrub or play the timeline and the planes fly, the events appear, the President crosses the map. Click an event in either view and it moves the cursor, flies the map to its location, and opens one shared detail panel (with the iconic imagery). Times are Eastern Daylight Time.
A Vite + TypeScript app (the same setup and vendored timel.in core as the
timeline). src/app.ts is the orchestrator; src/map.js is the MapLibre half as
a factory driven by the shared clock. The two clocks are reconciled by converting
between the timeline's OHM decimal-year and the map's minutes since
midnight (sept2001() ↔ yearToMin).
One curated build feeds both views — scripts/build_data.py writes:
python3 scripts/build_data.pypublic/events.json— the 42 events, each with the timeline fields and a map coordinate (events that happen aboard a plane are interpolated along its flight track), so every event is both a timeline mark and a map marker.public/{flights,president,people,sites}.geojson— the map's context layers.
Sources are the 9/11 Commission Report, NIST, and the FAA/NORAD timelines; flight paths are schematic; the DC positions of the people are approximate. The famous Reuters/AP classroom photo is not freely licensed and is omitted.
npm install && npm run build # → dist/ (GitHub Pages via .github/workflows)
npm run devKept factual and sober out of respect for those who were killed. In memory of the 2,977.
MIT © OpenHistoryMap