Dot Grid Map Logos Block for React

Each entry of PINS has a lat and a lon in degrees, the customer's name, icon and lettering, its city and country, and an anchor for the card (start, center or end, so a card near the map's edge stays on the map). The pin's place on the map is worked out from the coordinates and the bitmap's grid, so a new entry needs nothing else.

MAP is a list of strings, one per row, where 1 is a dot of land and 0 is sea; each cell is four degrees, 90 columns from the date line and 34 rows from 84 degrees north. Edit the rows to change the shape, or add rows and columns and update DEGREES and NORTH. One path draws every dot, so a bigger map costs only a longer string.

Geography keeps the Americas on the west side in every language, so the map and its pins sit in a box with dir="ltr". The header, the chips and the page's own lines still follow the page's direction, and the figures in the chips are wrapped in bdi.

No: the pins are not buttons, so there is nothing to tab through and the card is for the pointer. Nothing is only on the map, though: every pin is a list item that names the customer and its city for a screen reader, and the chips give the regions' counts. If a pin should open something, make it an a to the customer's story and open the card on group-focus-within as well as on hover.

The header, the map and the chips fade up once when the page loads, each pin pulses twice and stops (it never loops), and the card fades in on hover. With reduced motion the entrance and the pulse are off and the card appears at once.

Yes: the header's total is summed from REGIONS, so it is always the sum of the chips (3,100 here). Change a region's count and the header follows.