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

MapPiecetype

How one region is drawn: usually in one piece, where it is.

A region in a box of its own is that one piece moved into the box. A region with outlying islands in a box - a prefecture whose far islands belong down their own chain rather than in the sea off the mainland - is two: the region where it is, and the islands in their frame. Both carry the same region, so whichever piece is clicked is the same place.

Import it

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

Definition

type MapPiece = {
    d: string;
    transform: InsetTransform | null;
};

Members

NameTypeDescription
dstring
transformInsetTransform | null

Examples

import { loadDivisions } from "@johnmorrisdotca/chizu/load";
import { insetFor, mapRegionPieces, type MapPiece } from "@johnmorrisdotca/chizu";

const japan = (await loadDivisions("jp"))!;
const tokyo = japan.regions.find((region) => region.code === "13")!;
const pieces: MapPiece[] = mapRegionPieces(tokyo, insetFor(japan, "13"));
console.log(pieces.map((piece) => (piece.transform ? "in its box" : "in place")).join(", "));
// in place, in its box
in place, in its box

What it prints (run when this page was built)

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