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

Register map elements

import { … } from "@johnmorrisdotca/chizu/element/define";

6247.2 kB minified and gzipped, with everything it imports (measured with esbuild)

Register the map, locator and quiz elements. Import for its browser-only effect; safe on a server.

Exports

NameKindWhat it is
CHIZU_ELEMENT_OPTION_KEYSconstantReal host option keys, kept complete by TypeScript and checked by the builder's coverage gate.
ChizuElementOptionstypeOptions that require host code rather than an HTML attribute.
ChizuLocatorclass<chizu-locator>: locate a feature's id or a latitude,longitude pair, without contacting a geocoding service.
ChizuMapElementclass<chizu-map>: a map with highlights, labels, five-shade figures and keyboard selection.
ChizuQuizclass<chizu-quiz>: repeatable questions from a seed, native answer events and no persisted score.
defineLocatorfunctionRegister <chizu-locator> or a host's own tag; an existing definition is preserved.
defineMapfunctionRegister <chizu-map> or a host's own tag; an existing definition is preserved.
defineQuizfunctionRegister <chizu-quiz> or a host's own tag; an existing definition is preserved.
loadElementMapfunctionLoad a built-in map by world, country-<ISO> or divisions-<ISO>.
readMapColorsfunctionParse region colours, including native CSS colours with commas inside rgb()/hsl().
readMapDatafunctionParse finite choropleth figures; invalid JSON and nested or non-numeric values are rejected.

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