Function offsetColocated

src/components/WorldMap.tsx:161–202

(markets: ProcessedMarket[])

// Uses FIXED geographic offsets — zoom-in naturally separates bubbles via map projection.
// No zoom dependency: avoids the "separate then collapse" problem of recalculating on zoom.
function offsetColocated(markets: ProcessedMarket[]): ProcessedMarket[] {
  // Group nearby markets using a grid with 0.5° cells
  const cellSize = 0.5;
  const groups = new Map<string, ProcessedMarket[]>();
  for (const m of markets) {
    if (!m.coords) continue;
    const key = `${Math.floor(m.coords[0] / cellSize)},${Math.floor(m.coords[1] / cellSize)}`;
    const arr = groups.get(key) || [];
    arr.push(m);
    groups.set(key, arr);
  }

  const goldenAngle = Math.PI * (3 - Math.sqrt(5));

  const result: ProcessedMarket[] = [];
  for (const m of markets) {
    if (!m.coords) {
      result.push(m);
      continue;
    }
    const key = `${Math.floor(m.coords[0] / cellSize)},${Math.floor(m.coords[1] / cellSize)}`;
    const group = groups.get(key)!;
    if (group.length <= 1) {
      result.push(m);
      continue;
    }
    const idx = group.indexOf(m);
    // Tighter spacing to keep bubbles near their country centroid.
    const spacing = group.length > 50 ? 0.4 : group.length > 15 ? 0.3 : group.length > 5 ? 0.2 : 0.15;
    // Start from idx+1 so first item is NOT at center (avoids pile-up at origin)
    const n = idx + 1;
    const angle = n * goldenAngle;
    const r = spacing * Math.sqrt(n);
    const offsetLat = r * Math.cos(angle);
    const offsetLng = r * Math.sin(angle);
    result.push({
      ...m,
      coords: [m.coords[0] + offsetLat, m.coords[1] + offsetLng] as [number, number],
    });
  }
  return result;
}

function setsEqual<T>(a?: Set<T>, b?: Set<T>): boolean {
  if (a === b) return true;