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

CalloutRequesttype

The region codes, framing window, radius, numbering and layout options for a callout sheet.

Import it

import type { CalloutRequest } from "@johnmorrisdotca/chizu";

Definition

type CalloutRequest = {
    codes: readonly string[];
    box?: MapBox;
    radiusRatio?: number;
    polish?: boolean;
    keepOut?: CalloutKeepOut;
    numbering?: "given" | "west-to-east";
    features?: readonly Pick<ChizuFeature, "code" | "centroid">[];
};

Members

NameTypeDescription
codesreadonly string[]

The regions to number. A region the window does not show is not numbered.

box (optional)MapBox | undefined

The window the map is drawn in: circles are placed inside it. Default: the whole map.

radiusRatio (optional)number | undefined

The circle's radius as a share of the window's width. Default 0.03.

polish (optional)boolean | undefined

Finish with the slow pass that clears every near-miss: no two leaders closer than a circle's radius, no leader through another number, each leader leaving its region from the coast nearest its number. Worth its seconds on a sheet that is printed once; a map redrawn on every tap keeps to the quick walk. Default false.

keepOut (optional)CalloutKeepOut | undefined

Lengths of the window's bottom-right corner to keep clear, in map units, for a credit line: up the right edge and along the bottom.

numbering (optional)"given" | "west-to-east" | undefined

given numbers the regions in the order they were asked for; west-to-east numbers them as they run across the map. Default given.

features (optional)readonly Pick<ChizuFeature, "code" | "centroid">[] | undefined

Named features that may be numbered too (a layer's features, or featuresShown of it): a code in codes that is not a region's is looked for here, and its leader starts where its name goes, in the sea for a sea, on the line for a river. The land the circles keep off is still the map's own.

Examples

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

const request: CalloutRequest = { codes: ["BR", "AR", "CL"], numbering: "west-to-east" };
console.log(layoutCallouts(WORLD, request).map((spot) => `${spot.number} ${spot.code}`).join(", "));
// 1 CL, 2 AR, 3 BR
1 CL, 2 AR, 3 BR

What it prints (run when this page was built)

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