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 · Map, locator and quiz elements

ChizuElementOptionstype

Options that require host code rather than an HTML attribute. The existing mounted-map options stay available.

Import it

import type { ChizuElementOptions } from "@johnmorrisdotca/chizu/element";

Also exported from: @johnmorrisdotca/chizu/element/define

Definition

type ChizuElementOptions = Partial<ChizuMountOptions> & {
    data?: Readonly<Record<string, number>>;
    capital?: boolean;
};

Members

NameTypeDescription
map (optional)MapData | undefined

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)MapData | (() => Promise<MapData>) | 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.

data (optional)Readonly<Record<string, number>> | undefined

Finite figures keyed by a region's code or ISO code, drawn in five shades.

capital (optional)boolean | undefined

Add capital markers; false hides them even when all features are chosen. Defaults to true for map/locator embeds; quiz feature choices stay unchanged.

Examples

import { ChizuMapElement, type ChizuElementOptions } from "@johnmorrisdotca/chizu/element";
const options: ChizuElementOptions = { controls: false, data: { JP: 10 }, colors: { JP: "#2f6b4f" }, capital: false };
const map = new ChizuMapElement();
map.options = options;
document.body.append(map);

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