Reference · Markers on the globe
placeLabelsfunction
Place up to max labels inside width x height. Each label is tried to the right of its dot, then to the left, above and below; the first spot that is inside
and free of the labels already placed wins. Items are taken highest priority first (a tie keeps the order given). The cost is the number of items times at most
four tries against a grid of what is placed.
Import it
import { placeLabels } from "@johnmorrisdotca/chikyu-earth/markers";Definition
function placeLabels(items: readonly LabelItem[], width: number, height: number, max: number, cell?: number): Placement[]Parameters
| Name | Type | Description |
|---|---|---|
items | readonly LabelItem[] | The dots and the size of each one's label. |
width | number | The width of the area the labels must stay inside, in pixels. |
height | number | The height of that area, in pixels. |
max | number | The most labels to place. |
cell (optional) | number | The side of the grid cell used to find overlaps, in pixels. |
Returns
Placement[]
A placement for each label that fits; the others are left out.
Examples
import { placeLabels } from "@johnmorrisdotca/chikyu-earth/markers";
const items = [
{ x: 100, y: 100, r: 4, w: 60, h: 20, priority: 1 },
{ x: 110, y: 104, r: 4, w: 60, h: 20, priority: 9 },
];
console.log(placeLabels(items, 300, 300, 10).map((place) => place.item));[ 1, 0 ]What it prints (run when this page was built)