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

How-to

Load only the maps you need

Select the correct country, subdivision and feature resources without joining unrelated canvases.

Select a resource

/countries/jp is Japan’s outline as one region. /divisions/jp is its prefectures. Their codes, canvas sizes, projection and insets serve different jobs. The world has coarse outlines; the loader can fetch finer world geometry for interactive zooming. Names and groups are available independently from /names.

import { loadCountry, loadDivisions, loadFeatures, COUNTRY_CODES, DIVISIONS_CODES } from "@johnmorrisdotca/chizu/load";
const country=await loadCountry("JP");
const divisions=await loadDivisions("jp");
const features=divisions?await loadFeatures(divisions):null;
console.log(COUNTRY_CODES.length,DIVISIONS_CODES.length,country?.id,divisions?.regions.length,features?.map);
238 32 country-jp 47 divisions-jp

Codes are case-insensitive in the country/division loaders. Unknown resources return null; a failed dynamic import is an error to handle at your application boundary. FEATURE_MAPS lists existing layer ids. A feature layer belongs to the map named by its map field.

Fixed imports or dynamic loaders

Use a fixed resource import when the page always draws it. Use loadCountry, loadDivisions and loadFeatures when the visitor chooses. The explicit named resource exports document the same paths supported by the wildcard exports; their data and order are unchanged.

See map data, ISO codes and the country naming rules.

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