Map pins from a projection, not by eyeMap pins from a projection, not by eye

Thirty pins, placed by eye

The design called for a coverage map: one flat image, thirty pins on the countries the platform serves. The obvious way to build it is to open the image, drag a pin until it looks right, write down the percentages, and repeat twenty-nine times.

It works, and it is a dead end. Nobody can check a pin placed by eye, because there is nothing to check it against. When somebody asks why one sits in the sea, the only answer is that it looked fine in the browser I had open.

Fitting the projection

The map is a plate carrée, which means the relationship between latitude, longitude and pixels is linear, and a straight line needs only two points to be pinned down. I used five, chosen where the coastline is unambiguous enough that two people would click within a pixel of each other, and fitted the scale and offset against them.

const x = (lon - lon0) * scaleX;
const y = (lat0 - lat) * scaleY;
// scaleX, scaleY, lon0, lat0 fitted against five coastline anchors

After that the pins are not placed at all. They are computed, from the coordinates of the places they represent.

What a correction looks like now

A pin placed by eye is a number nobody can argue with, because there is nothing to argue about. A pin from a projection is a number anybody can check on any map.

A wrong pin used to be a drag, a screenshot and a hope. Now it is an edit to a latitude and a longitude, reviewed like any other line, and it is right at every screen width because the arithmetic runs at render time rather than in my eyes.

The same idea, twice more

That rewrite kept the same design and copy and none of the original code, which made it a good place to notice how often the eye had been standing in for a rule. The assets were the loudest case: 43 MB down to 707 KB through a pipeline, where a single flat-gradient background at 3840×2160 had been 7 MB by itself.

The legal page was the other. Its 146 clauses had been folded into accordions, which is a way of admitting the page is too long without making it shorter. Every accordion was deleted and both documents put on the page in full beside a sticky rail, so a clause can be found with the browser search and linked to.

The habit worth keeping

When a visual decision can be expressed as arithmetic, express it. Choose anchor points where two honest people would agree. And keep asking which parts of the interface are hiding a rule behind a judgement call, because those are the parts that get quietly wrong.