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

MapOutlinetype

A map's outlines, drawn where they are drawn: a region in a box carried into it, outlying islands in a box carried into theirs, everything else where the projection put it.

Kept against the map itself, so a page that redraws on every pick parses its paths once. Canada's are 76,000 points and cost 16ms to walk, a third of a frame, on a keystroke.

Import it

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

Definition

type MapOutline = {
    rings: MapRing[];
    anchor: [
        number,
        number
    ] | null;
};

Members

NameTypeDescription
ringsMapRing[]
anchor[number, number] | null

Where a leader to this region should end: a point on the land, as drawn.

Examples

import WORLD from "@johnmorrisdotca/chizu/world";
import { mapOutlines, type MapOutline } from "@johnmorrisdotca/chizu";

const japan: MapOutline = mapOutlines(WORLD)[WORLD.regions.findIndex((region) => region.code === "JP")]!;
console.log(japan.rings.length > 1, japan.anchor !== null);
// true true
true true

What it prints (run when this page was built)

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