Afet Harita
Two weeks as a volunteer frontend engineer on the help map that thousands of volunteers built after the February 2023 earthquake in Türkiye.
- role
- Volunteer frontend engineer
- period
- 2023
- kind
- open-source
- status
- archived
- stack
- Next.js · TypeScript · MUI · Leaflet · next-seo · next-i18next
- links
- repo ↗
https://goksen.ing/work/afet-harita
Context
On 6 February 2023, an earthquake centred in Kahramanmaraş hit at least ten provinces in Türkiye. People posted calls for help on social media. Volunteers turned those posts into data, thousands of other volunteers checked it, and the result became a map: afetharita.com. It was the first output of the group that later became Açık Yazılım Ağı (AYA). The team's own story of the project reports "500 thousand unique users and millions of traffic on the first day". The site is offline now; the map as it was on 16 February 2023 is in the Web Archive.
Joining
My first pull request is from 8 February, two days after the earthquake. Everything happened in the open: a Discord server that grew to almost 24,000 people, a public repository under the Apache 2.0 license, and pull requests that other volunteers reviewed and merged.
In two weeks I opened 24 pull requests, and 22 of them merged. Later I had merge rights: I merged some of my own work, a pull request by another volunteer, and the release from development to rc (#859).
A link that shows the place
A map like this travels as links. Someone shares a link to a marker in a feed or a group chat, and the next person decides from the preview whether to open it. So the preview is part of the product: if it shows only a generic site card, the place, which is the one thing that matters, is lost.
I added next-seo with Open Graph images from an edge function (#427), and then a meta-tag component bound to the map markers (#516). With it, a shared link to a marker showed that place, not the home page. #443, #446, and #868 refined it.
┌───────────────────────────────┐
│ │
│ call for help on social media │
│ │
└───────────────┬───────────────┘
│
│
│
│
┌───────────────────────────────┐
│ │
│ turned into data, verified │
│ │
└───────────────┬───────────────┘
│
│
│
│
┌───────────────────────────────┐
│ │
│ marker on the map │
│ │
└───────────────┬───────────────┘
│
│
│
│
┌───────────────────────────────┐
│ │
│ link to the marker, shared │
│ │
└───────────────┬───────────────┘
│
│
│
│
┌───────────────────────────────┐
│ │
│ preview shows the place │
│ │
└───────────────────────────────┘A call for help becomes data, the data becomes a marker, and the marker becomes a link that people pass on. My part was the last step: the link had to arrive with its place.
When the map froze
The map froze while it rendered marker clusters. A memoization fix in the cluster code stopped it (#635). It was a small change on a map that could not afford to freeze.
A new map page while the old one served
The data channels got names that said what they were: "Twitter" became "Social Media", and "Babala" became "Verified", across the filters, the layers, and the translations (#834).
Then the map page itself changed. The new layout grew next to the old one: a new index page and theme, a help view, merged control layers, a Turkish and English switch, and filter components with server-side props (#993 to #1092, and #1110). The old page kept serving the whole time. When the new one was ready, it replaced the old index in one step (#1092). Translations followed in #1090 and #1128.
Working with strangers under pressure
Not all of the work left a pull request. I paired with other volunteers on problems that were faster to solve together, and I helped coordinate the work on Discord, so that parallel changes to the same page did not collide.
What made it work was not heroics. It was small pull requests that one reviewer could read quickly, a feature branch when a change was too large to land at once, and one plain rule that everybody kept: the live site must keep working, because people are using it right now.
By the numbers
days 14, from 8 to 21 February 2023
pull requests 24 opened, 22 merged
commits 78 on development
contributors 4th of 82, by commitsWhat I took from it
- The share is the interface. When people meet a product as a link, the preview is its first screen. Design it like one.
- In a crowd, small changes win. A pull request that a stranger can review in minutes is worth more than a perfect one that waits.
- Replace in place. Build the new version next to the old one, and switch when it is ready. The old one keeps serving until then.