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

CalloutSpottype

One numbered circle placed in open water, and the leader line that joins it to its region.

Import it

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

Definition

type CalloutSpot = {
    code: string;
    number: number;
    start: [
        number,
        number
    ];
    circle: [
        number,
        number
    ];
    radius: number;
};

Members

NameTypeDescription
codestring

The region it names.

numbernumber

Its number: where it was in the list asked for, from 1 (or its place from the west, with numbering: "west-to-east").

start[number, number]

Where its leader starts: a point on the region's own land, as drawn.

circle[number, number]

The circle's centre.

radiusnumber

The circle's radius, in the map's units.

Examples

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

const [first]: CalloutSpot[] = layoutCallouts(WORLD, { codes: ["JP"] });
console.log(first!.code, first!.number);
// JP 1
JP 1

What it prints (run when this page was built)

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