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

zoomToFitfunction

The zoom step and centre that show all of these regions at once: for opening a region from its heading, which wants it filling the view and not the whole map with a few regions lit somewhere in it.

It picks the closest step whose window still holds everything, with the same room around it that a focus box leaves; a set that will not fit at 2× is shown at 1× rather than cut. Measured where the regions are drawn, so an inset's region is its box and not its true position out at sea. The room is a share of each side, and a set that cannot fit closer with the margin gets one more try at the bare shape before it is shown at 1×: the margin is what makes a fit comfortable, not what makes it a fit.

Import it

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

Definition

function zoomToFit(map: Frameable, codes: ReadonlyArray<string | number>): { zoom: MapZoom; centre: { x: number; y: number; }; }

Parameters

NameTypeDescription
mapFrameable

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.

Returns

{ zoom: MapZoom; centre: { x: number; y: number; }; }

The zoom step and centre that show all of these regions at once: for opening a region from its heading, which wants it filling the view and not the whole map with a few regions lit somewhere in it.

Examples

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

const fit = zoomToFit(WORLD, ["GB", "IE"]);
console.log(fit.zoom, Math.round(fit.centre.x), Math.round(fit.centre.y));
// 10 58 148
10 58 148

What it prints (run when this page was built)

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