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

calloutSpacesfunction

Every place in the frame where a circle fits clear of the land and of the credit's corner, on a grid fine enough to find the water beside a coast.

A frame with no room at all - a map zoomed until the land fills it - gets the grid unfiltered rather than nothing, because a number on land is still better than a number that is not drawn.

Import it

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

Definition

function calloutSpaces(radius: number, box: MapBox, keepOut: CalloutKeepOut, land: readonly CalloutLand[]): CalloutPlace[]

Parameters

NameTypeDescription
radiusnumber

The circle or label radius in native map units.

boxMapBox

The window in native map units, or the inset destination specified by this signature.

keepOutCalloutKeepOut

The native frame areas reserved against callout placement.

landreadonly CalloutLand[]

Native land geometry or land obstacles that labels must avoid.

Returns

CalloutPlace[]

Every place in the frame where a circle fits clear of the land and of the credit's corner, on a grid fine enough to find the water beside a coast.

Examples

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

// An empty sea 100 across: every place on the grid is open water.
console.log(calloutSpaces(4, { x: 0, y: 0, width: 100, height: 100 }, { bottom: 0, right: 0 }, []).length > 20);
// true
true

What it prints (run when this page was built)

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