`ChizuDrawOptions`型

リファレンスの説明と例は英語です。見出しと目次は日本語です。

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

インポート

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

定義

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;
};

メンバー

名前	型	説明
`box` (省略可)	`MapBox \| undefined`	The window to show: a part of the map, as `focusBox`, `zoomBox` or `regionBox` frame it. Default: the whole map.
`language` (省略可)	`ChizuLanguage \| undefined`	The language of the names a screen reader hears, and of the labels. Default `en`.
`tones` (省略可)	`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` (省略可)	`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` (省略可)	`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` (省略可)	`boolean \| readonly string[] \| undefined`	Print the names on the land: all the regions that are big enough to hold theirs, or just these.
`insetFrames` (省略可)	`boolean \| undefined`	Draw a dashed frame round each inset. Default true.
`interactive` (省略可)	`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` (省略可)	`string \| undefined`	What a screen reader hears of the drawing, instead of "Map of the world".
`style` (省略可)	`boolean \| undefined`	Put `CHIZU_STYLE` inside, so the drawing stands alone as an image.
`features` (省略可)	`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` (省略可)	`ChizuFeatureLayer \| null \| undefined`	The map's named features: `loadFeatures(map.id)`. Drawn only when its `map` is this map's id.
`featureLabels` (省略可)	`boolean \| undefined`	Print the features' names. Default true.

例

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

出力（このページを作ったときに実行した結果）

ソースを見る GitHub で編集@johnmorrisdotca/chizu 1.5.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。

ChizuDrawOptions型

定義

メンバー

例

`ChizuDrawOptions`型