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

ChizuPlacetype

The part of a region the engine reads, so a map of your own regions needs no more than these.

Import it

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

Definition

type ChizuPlace = Pick<ChizuRegion, "code" | "path" | "bbox" | "centroid" | "neighbors" | "group">;

Members

NameTypeDescription
codestring

Its code within its map: an ISO 3166-1 alpha-2 code on the world (JP), the postal or ISO 3166-2 part on a country (ON), the prefecture number in Japan (13).

pathstring

Its outline, M x,y L x,y … Z with one piece for each part (islands are pieces), on the map's canvas.

bbox[number, number, number, number]

The box round all of it.

centroid[number, number]

The middle of it, which falls in the sea when the place is a chain or a crescent: landAnchor finds a point on its land.

neighborsstring[]

The codes of the regions that share a border point with it, in order.

groupstring

What kind of region it sits among, for choosing look-alikes: a continent on the world, a larger part of the country on a country's map.

Examples

import { findQuestion, seededRandom, type ChizuPlace } from "@johnmorrisdotca/chizu";

// Three places of your own, drawn on a canvas 100 wide: the engine needs no more than these fields.
const square = (code: string, x: number): ChizuPlace => ({
  code,
  path: `M${x},0L${x + 30},0L${x + 30},30L${x},30Z`,
  bbox: [x, 0, x + 30, 30],
  centroid: [x + 15, 15],
  neighbors: [],
  group: "squares",
});
const places = [square("a", 0), square("b", 35), square("c", 70)];
console.log(findQuestion({ width: 100, height: 30, regions: places.map((place) => ({ ...place, name: place.code })) }, "b", seededRandom(1), { count: 2 })?.choices.length);
// 3
3

What it prints (run when this page was built)

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