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

HandleSpottype

A numbered region’s label position, native land anchor and leader geometry.

Import it

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

Definition

type HandleSpot = {
    x: number;
    y: number;
    hx: number;
    hy: number;
};

Members

NameTypeDescription
xnumber

The region's own centre, where the stem starts.

ynumber
hxnumber

Where the circle and its number sit.

hynumber

Examples

import { placeHandles, type HandleSpot } from "@johnmorrisdotca/chizu";

const [spot]: HandleSpot[] = placeHandles([{ item: "a", centroid: [50, 50] }], 5);
console.log(spot!.x, spot!.y, spot!.hx !== spot!.x || spot!.hy !== spot!.y);
// 50 50 true
50 50 true

What it prints (run when this page was built)

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