World Map Pin Overlay Features Block for React

Edit REGIONS at the top of the file: each has a name, its cities, a longitude and latitude for the pin, and its numbers (locations, median latency, uptime). The pin's place is computed from the coordinates, and the "all regions" figures are derived from the same list: the locations add up, latency is weighted by them, and uptime is the mean. The header counts them too.

MAP is 34 rows of 90 characters, each a 4-degree cell, with 1 for land. A small function turns every land cell into a zero-length round-capped segment, so one path draws all the dots at a width you set with strokeWidth. To redraw the world at another resolution, replace the rows and change DEGREES; the pins follow.

The map and its pins are decoration and are hidden from assistive technology. The regions are a list of buttons that you can reach with Tab and press with Enter or Space; a pressed region says so, and the figures are announced politely when they change. The same facts are in text, so nothing depends on seeing the map.

No: a map keeps its geography, so the figure is dir="ltr" and the pins stay where the regions are. The region list and the figures follow the page's direction.

The map scales down with its container and the pins shrink with it. The regions are two across, and the three figures stack one per row with a hairline between them.

The header and the map fade up once on load, the chosen pin pings, and the figures roll to their new values. With reduced motion the fade and the ping are off and the digits change in place.