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

ChizuLocalDrawOptionstype

What a drawing of a local map shows beyond the shapes. Every part is optional.

Import it

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

Definition

type ChizuLocalDrawOptions = {
    box?: MapBox;
    language?: ChizuLanguage;
    label?: string;
    style?: boolean;
    styles?: Readonly<Record<string, ChizuLocalStyle>>;
    tones?: Readonly<Record<string, string>>;
    labels?: boolean | readonly string[];
    callouts?: readonly string[] | Omit<CalloutRequest, "box">;
    interactive?: boolean;
    markers?: boolean;
    scaleBar?: boolean;
    credits?: readonly string[];
    naturalEarth?: boolean;
};

Members

NameTypeDescription
box (optional)MapBox | undefined

The window to show, in the canvas's units (as zoomBox, focusBox and regionBox frame a local map too). Default: the whole canvas.

language (optional)ChizuLanguage | undefined
label (optional)string | undefined

What a screen reader hears of the drawing, instead of "Map of {name}".

style (optional)boolean | undefined

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

styles (optional)Readonly<Record<string, ChizuLocalStyle>> | undefined

The look of a shape, by its kind (water), a class it has, or its id; those that apply are merged in that order, the id last.

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

A tone for each shape, by id, as drawChizu's tones.

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

Print the names: all that fit, or just these ids.

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

Numbered circles with leader lines to these ids (shapes, pictures), placed by layoutCallouts in the open ground.

interactive (optional)boolean | undefined

Give every shape and picture its data-code as a thing to press, with role="button" and tabindex="-1".

markers (optional)boolean | undefined

Draw the pictures. Default true.

scaleBar (optional)boolean | undefined

A scale bar in metres. Default true.

credits (optional)readonly string[] | undefined

More credit lines, after the map's own.

naturalEarth (optional)boolean | undefined

Begin the credit with chizu's own: the outlines are Natural Earth's (public domain). Say so when the drawing goes beside or over one of its maps. Default false.

Examples

import { drawLocal, type ChizuLocalDrawOptions } from "@johnmorrisdotca/chizu/draw";
import { localMap } from "@johnmorrisdotca/chizu";

const options: ChizuLocalDrawOptions = { style: true, scaleBar: true, credits: ["Shapes made up for this example"] };
console.log(drawLocal(localMap({ centre: [139.7, 35.7], widthMetres: 500 }), options).includes("Shapes made up"));
// true
true

What it prints (run when this page was built)

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