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

ChizuMounttype

The mounted native map’s drawing updates, selected region, framing, loaded features and cleanup handle.

Import it

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

Definition

type ChizuMount = {
    set(patch: Partial<Omit<ChizuMountOptions, "map">>): void;
    setMap(map: ChizuMap): void;
    select(code: string | null): void;
    show(codes: readonly string[]): void;
    zoomBy(by: 1 | -1): void;
    reset(): void;
    view(): ChizuView;
    featureLayer(): ChizuFeatureLayer | null;
    destroy(): void;
};

Members

NameTypeDescription
set(patch: Partial<Omit<ChizuMountOptions, "map">>): void

Change any of the options but map, and redraw.

setMap(map: ChizuMap): void

Show another map, from its whole.

select(code: string | null): void

Choose a region (or none), zooming to it unless fit is off.

show(codes: readonly string[]): void

Look at these regions, as close as will hold them all.

zoomBy(by: 1 | -1): void

One step in or out, about the middle of the window.

reset(): void

Back to the whole map.

view(): ChizuView

Where the map is looking now.

featureLayer(): ChizuFeatureLayer | null

The features of the map shown now, once they are here; null before, and for a map with none.

destroy(): void

Take it out of the page.

Examples

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

const mount: ChizuMount = mountChizu(document.querySelector<HTMLElement>("#map")!, { map: WORLD });
mount.select("FR");
mount.destroy();

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