layoutCalloutsfunction

Numbered circles in the open space around and between the regions of a map, each with a leader line to its region.

A circle sits in the water and not on the land, no two leaders cross, and a leader crosses as little land as it can (see placeCallouts for how the three are weighed). The result is geometry only: draw it with drawChizu's callouts option or with anything else that draws circles and lines. It is the same arrangement for the same map, window and list, every time, with no randomness in it that is not seeded.

On a map that wraps, a window that overhangs the cut shows land twice, so both copies keep the circles out, and a region is numbered where the window shows it.

import { layoutCallouts } from "@johnmorrisdotca/chizu";

function layoutCallouts(map: Pick<ChizuMap, "regions" | "insets" | "width" | "height" | "wraps">, request: CalloutRequest): CalloutSpot[]

import WORLD from "@johnmorrisdotca/chizu/world";
import { layoutCallouts } from "@johnmorrisdotca/chizu";

const spots = layoutCallouts(WORLD, { codes: ["JP", "BR", "EG", "AU"], radiusRatio: 0.02 });
console.log(spots.map((spot) => `${spot.number} ${spot.code}`).join(", "));
// 1 JP, 2 BR, 3 EG, 4 AU

1 JP, 2 BR, 3 EG, 4 AU