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 · Load maps and features

loadFeaturesfunction

The named features of a map (its seas, lakes, rivers, landforms and peaks), drawn on its own canvas, by the map or its id: a file of its own, fetched only when asked for. null for a map that has none. Pass it to drawChizu and mountChizu as featureLayer, with features: ["water"] (or any group or kind) to draw them; mountChizu also takes this function itself, and fetches each map's layer the first time it is shown.

Import it

import { loadFeatures } from "@johnmorrisdotca/chizu/load";

Definition

function loadFeatures(map: string | Pick<ChizuMap, "id">): Promise<ChizuFeatureLayer | null>

Parameters

NameTypeDescription
mapstring | Pick<ChizuMap, "id">

The native map or map fields required by this signature; coordinates and region codes belong to its canvas.

Returns

Promise<ChizuFeatureLayer | null>

The matching feature layer, or null when the requested map has no built-in layer.

Examples

import { loadFeatures } from "@johnmorrisdotca/chizu/load";

const japan = (await loadFeatures("divisions-jp"))!;
const seto = japan.features.find((one) => one.nameJa === "瀬戸内海")!;
console.log(japan.map, seto.name, seto.kind, seto.reading, await loadFeatures("divisions-xx"));
// divisions-jp Seto Inland Sea sea せとないかい null
divisions-jp Seto Inland Sea sea せとないかい null

What it prints (run when this page was built)

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