Dotted map

type LatLng = { lat: number; lng: number };

const regions = [
  { city: 'Virginia', lat: 38.9, lng: -77.4 },
  { city: 'London', lat: 51.5, lng: -0.1 },
  { city: 'Singapore', lat: 1.35, lng: 103.8 },
  { city: 'Sydney', lat: -33.9, lng: 151.2 }
];

// Equirectangular: longitude and latitude map straight to x and y.
// The map spans 85°N to 58°S, which crops Antarctica.
const x = (lng: number) => lng + 180;
const y = (lat: number) => 85 - lat;

// `land`: land cells on a 4° grid, precomputed at build time from a
// public-domain coastline dataset such as Natural Earth.
export function DottedMap({ land }: { land: LatLng[] }) {
  // Each dot is a zero-length line; its round cap draws a circle.
  const dots = land
    .filter((point) => point.lat > -58)
    .map((point) => `M${x(point.lng)} ${y(point.lat)}h0`)
    .join('');

  return (
    <div className='relative aspect-[360/143] w-full'>
      <svg
        viewBox='0 0 360 143'
        aria-hidden
        className='absolute inset-0 size-full text-neutral-300'
      >
        <path
          d={dots}
          stroke='currentColor'
          strokeWidth={2}
          strokeLinecap='round'
        />
      </svg>
      <ul>
        {regions.map((region) => (
          <li
            key={region.city}
            className='group absolute size-2.5 -translate-1/2'
            style={{
              left: `${(x(region.lng) / 360) * 100}%`,
              top: `${(y(region.lat) / 143) * 100}%`
            }}
          >
            <span
              aria-hidden
              className='absolute inset-0 animate-ping rounded-full bg-blue-500 motion-reduce:animate-none'
            />
            <span className='absolute inset-0 rounded-full bg-blue-600 ring-2 ring-white' />
            {/* Real text, so screen readers hear every region. */}
            <span className='absolute bottom-full left-1/2 mb-2 -translate-x-1/2 rounded-md bg-neutral-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100'>
              {region.city}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}