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 · Draw maps as SVG

ChizuDrawOptionstype

What a drawing shows beyond the map itself. Every part is optional: a map alone is its land on its sea.

Import it

import type { ChizuDrawOptions } from "@johnmorrisdotca/chizu/draw";

Definition

type ChizuDrawOptions = {
    box?: MapBox;
    language?: ChizuLanguage;
    tones?: Readonly<Record<string, string>>;
    colors?: Readonly<Record<string, string>>;
    callouts?: readonly string[] | Omit<CalloutRequest, "box">;
    labels?: boolean | readonly string[];
    insetFrames?: boolean;
    interactive?: boolean;
    label?: string;
    style?: boolean;
    features?: readonly ChizuFeatureChoice[];
    featureLayer?: ChizuFeatureLayer | null;
    featureLabels?: boolean;
};

Members

NameTypeDescription
box (optional)MapBox | undefined

The window to show: a part of the map, as focusBox, zoomBox or regionBox frame it. Default: the whole map.

language (optional)ChizuLanguage | undefined

The language of the names a screen reader hears, and of the labels. Default en.

tones (optional)Readonly<Record<string, string>> | undefined

A tone for each region, by code: selected, correct, wrong, hint, muted, faint, or any name x, which is the class cz-tone-x for your own style.

colors (optional)Readonly<Record<string, string>> | undefined

A colour for each region, by code: { JP: "#2f6b4f", GB: "#8a3b3b" }, for two or more places that must be told apart (a comparison, a choropleth you colour yourself). A hex colour (#2f6b4f, #fc0), a CSS colour name (teal), rgb(), hsl() or a var(--name) is drawn as the land's fill, over its tone's; any other text is ignored, so a value from an address or a form cannot put anything else into the drawing. A region not named keeps the theme's land (or its tone's). The colour is the same in the light and dark looks. Default none.

callouts (optional)readonly string[] | Omit<CalloutRequest, "box"> | undefined

Numbered circles in open water with leader lines to these regions (layoutCallouts): a list of codes, or a request.

labels (optional)boolean | readonly string[] | undefined

Print the names on the land: all the regions that are big enough to hold theirs, or just these.

insetFrames (optional)boolean | undefined

Draw a dashed frame round each inset. Default true.

interactive (optional)boolean | undefined

Give every region its data-code as a thing to press, with a pointer cursor, role="button" and tabindex="-1", for a page to hand focus to.

label (optional)string | undefined

What a screen reader hears of the drawing, instead of "Map of the world".

style (optional)boolean | undefined

Put CHIZU_STYLE inside, so the drawing stands alone as an image.

features (optional)readonly ChizuFeatureChoice[] | undefined

Which named features to draw from featureLayer: water (seas, lakes and rivers), all, a group (marine, landforms, lakes, rivers, peaks) or a kind (strait). Default none, so a map without them is drawn as it always was. A feature takes a tone by its code in tones, like a region, and may be numbered in callouts; a feature given a tone is drawn whether or not its group is chosen.

featureLayer (optional)ChizuFeatureLayer | null | undefined

The map's named features: loadFeatures(map.id). Drawn only when its map is this map's id.

featureLabels (optional)boolean | undefined

Print the features' names. Default true.

Examples

import WORLD from "@johnmorrisdotca/chizu/world";
import { drawChizu, type ChizuDrawOptions } from "@johnmorrisdotca/chizu/draw";

const options: ChizuDrawOptions = { language: "ja", tones: { JP: "selected" }, style: true };
console.log(drawChizu(WORLD, options).includes('data-tone="selected"'));
// true
true

What it prints (run when this page was built)

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