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

shapeGlyphBoxfunction

A square window on one region's own outline, for drawing it as an icon: every shape gets the same box and fills it, so a small region is as legible in a list as a large one.

Import it

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

Definition

function shapeGlyphBox(bbox: readonly [number, number, number, number]): MapBox

Parameters

NameTypeDescription
bboxreadonly [number, number, number, number]

The native left, top, right and bottom bounds of the geometry.

Returns

MapBox

A square window on one region's own outline, for drawing it as an icon: every shape gets the same box and fills it, so a small region is as legible in a list as a large one.

Examples

import WORLD from "@johnmorrisdotca/chizu/world";
import { shapeGlyphBox } from "@johnmorrisdotca/chizu";

const chile = WORLD.regions.find((region) => region.code === "CL")!;
const box = shapeGlyphBox(chile.bbox);
console.log(box.width === box.height);
// true
true

What it prints (run when this page was built)

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