Skip to the content

Chizu地図

Draw SVG maps, frame regions, place numbered callouts and build geography quizzes with English and Japanese names.

Chizu is the Japanese word 地図 for map. About the name

Contents

Reference · Framing, geometry and quiz tools

calloutGridfunction

The same places, with the grid they were found on.

Import it

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

Definition

function calloutGrid(radius: number, box: MapBox, keepOut: CalloutKeepOut, land: readonly CalloutLand[]): { places: CalloutPlace[]; cols: number; step: number; }

Parameters

NameTypeDescription
radiusnumber

The circle or label radius in native map units.

boxMapBox

The window in native map units, or the inset destination specified by this signature.

keepOutCalloutKeepOut

The native frame areas reserved against callout placement.

landreadonly CalloutLand[]

Native land geometry or land obstacles that labels must avoid.

Returns

{ places: CalloutPlace[]; cols: number; step: number; }

The same places, with the grid they were found on.

Examples

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

const grid = calloutGrid(4, { x: 0, y: 0, width: 100, height: 100 }, { bottom: 0, right: 0 }, []);
console.log(grid.cols > 0, grid.step > 0, grid.places.length > 0);
// true true true
true true true

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/chizu 1.5.0.