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 · Interactive maps

ChizuViewtype

Where a mounted map is looking.

Import it

import type { ChizuView } from "@johnmorrisdotca/chizu/mount";

Definition

type ChizuView = {
    zoom: MapZoom;
    centre: {
        x: number;
        y: number;
    };
    box: MapBox;
};

Members

NameTypeDescription
zoom1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
centre{ x: number; y: number; }
boxMapBox

Examples

import WORLD from "@johnmorrisdotca/chizu/world";
import { mountChizu, type ChizuView } from "@johnmorrisdotca/chizu/mount";

const mount = mountChizu(document.querySelector<HTMLElement>("#map")!, { map: WORLD });
const view: ChizuView = mount.view();
console.log(view.zoom, view.box);

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