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 · Interactive maps

ChizuMountOptionstype

What a mounted map is told. Everything but map may be changed later with set.

Import it

import type { ChizuMountOptions } from "@johnmorrisdotca/chizu/mount";

Definition

type ChizuMountOptions = {
    map: ChizuMap;
    language?: ChizuLanguage;
    zoom?: MapZoom;
    tones?: Readonly<Record<string, string>>;
    colors?: Readonly<Record<string, string>>;
    callouts?: ChizuDrawOptions["callouts"];
    labels?: ChizuDrawOptions["labels"];
    selected?: string | null;
    fit?: boolean;
    selectable?: boolean;
    controls?: boolean;
    onSelect?: (code: string | null) => void;
    detail?: ChizuMap | (() => Promise<ChizuMap>);
    detailFrom?: MapZoom;
    onView?: (view: ChizuView) => void;
    features?: readonly ChizuFeatureChoice[];
    featureLayer?: ChizuFeatureLayer | null | ((mapId: string) => Promise<ChizuFeatureLayer | null>);
    featureLabels?: boolean;
};

Members

NameTypeDescription
mapChizuMap

The map to show: WORLD, a country's own, or a country's regions.

language (optional)ChizuLanguage | undefined

The language of the names and of the buttons. Default: the page's lang, or English.

zoom (optional)1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined

The zoom step to start at (1 to 10). Default 1.

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

Tones by code (drawChizu's tones). The chosen region is selected unless it is given a tone here.

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

A colour for each region by code (drawChizu's colors): two places told apart, or a map coloured your own way.

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

Numbered callouts (drawChizu's callouts), placed for the window as it is after each move.

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

Print names on the land.

selected (optional)string | null | undefined

The chosen region's code, or null.

fit (optional)boolean | undefined

Zoom in on a region when it is chosen. Default true.

selectable (optional)boolean | undefined

Whether pressing a region chooses it. Off, a press does nothing and the map is only looked at (a quiz that asks the question itself). Default true.

controls (optional)boolean | undefined

Show the zoom buttons and the zoom level. Default true.

onSelect (optional)((code: string | null) => void) | undefined

A region was pressed (or its number): its code. Pressing the chosen one again passes null.

detail (optional)ChizuMap | (() => Promise<ChizuMap>) | undefined

A finer drawing of the same map, drawn from detailFrom in, where the map's own outlines would look angular: the world's is loadWorldDetail (pass the function, and it is fetched the first time it is wanted). It is used only when its id is the map's with -detail after it, so a detail left over from another map is never drawn. Framing, choosing and callouts keep to map. Default: none.

detailFrom (optional)1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined

The zoom step the finer drawing starts at. Default 4.

onView (optional)((view: ChizuView) => void) | undefined

The view changed: after a zoom, and when a drag ends.

features (optional)readonly ChizuFeatureChoice[] | undefined

Which named features to draw (drawChizu's features): ["water"], ["all"], a group or a kind. Default none.

featureLayer (optional)ChizuFeatureLayer | ((mapId: string) => Promise<ChizuFeatureLayer | null>) | null | undefined

The map's named features: a layer (loadFeatures(map.id)), or loadFeatures itself, which is called with each map's id the first time its features are wanted, so a page that changes maps fetches each map's once. A feature can then be pressed, chosen (select, selected) and shown (show) by its code, as a region is.

featureLabels (optional)boolean | undefined

Print the features' names. Default true.

Examples

import WORLD from "@johnmorrisdotca/chizu/world";
import { mountChizu, type ChizuMountOptions } from "@johnmorrisdotca/chizu/mount";

const options: ChizuMountOptions = { map: WORLD, language: "ja", selected: "JP", onSelect: (code) => console.log(code) };
mountChizu(document.querySelector<HTMLElement>("#map")!, options);

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