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 · Framing, geometry and quiz tools

groupBoxfunction

The window that shows a group whole, shaped to the frame it is drawn in (aspect, how much wider than tall), with a little room round it. Each member is framed on its mainland (mainlandBounds), so France's overseas departments, drawn on the world as part of France, do not stretch Europe's window to South America; a region drawn in a box is framed where it is drawn. The whole map for a group the map has none of.

Import it

import { groupBox } from "@johnmorrisdotca/chizu";

Definition

function groupBox(map: ChizuMap, codes: ReadonlyArray<string | number>, aspect?: number): MapBox

Parameters

NameTypeDescription
mapChizuMap

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

codesreadonly (string | number)[]

Native region codes from this map, in the requested order.

aspect (optional)number

The desired window width divided by its height.

Returns

MapBox

The window that shows a group whole, shaped to the frame it is drawn in (aspect, how much wider than tall), with a little room round it. Each member is framed on its mainland (mainlandBounds), so France's overseas departments, drawn on the world as part of France, do not stretch Europe's window to South America; a region drawn in a box is framed where it is drawn. The whole map for a group the map has none of.

Examples

import WORLD from "@johnmorrisdotca/chizu/world";
import { CHIZU_CONTINENTS } from "@johnmorrisdotca/chizu/names";
import { drawChizu } from "@johnmorrisdotca/chizu/draw";
import { groupBox, groupTones } from "@johnmorrisdotca/chizu";

const europe = CHIZU_CONTINENTS.find((continent) => continent.code === "EU")!;
const svg = drawChizu(WORLD, { box: groupBox(WORLD, europe.codes, 4 / 3), tones: groupTones(WORLD, europe.codes) });
console.log(svg.startsWith("<svg"));
// true
true

What it prints (run when this page was built)

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