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

ChizuLocalMaptype

A map of a small place: a ChizuMap (so every function of the engine takes it) whose canvas is a city or a venue in a local projection, whose regions are the polygons of the data, and which also holds the lines, points, pictures and credits that drawLocal draws.

Import it

import type { ChizuLocalMap } from "@johnmorrisdotca/chizu";

Definition

interface ChizuLocalMap extends ChizuMap {
    kind: "local";
    shapes: ChizuLocalShape[];
    markers: ChizuLocalMarker[];
    credits: string[];
    problems: string[];
}

Members

NameTypeDescription
kind"local"

What its regions are: the whole world, a single country, the divisions of one, or the shapes of a local map of a city or a venue.

shapesChizuLocalShape[]

Every shape of the data, in the order given: areas, lines and points.

markersChizuLocalMarker[]
creditsstring[]
problemsstring[]

What was left out of the data, and why, one line each.

idstring

world, country-fr (France alone, from Natural Earth's countries) or divisions-fr (its départements).

namestring

The map's name in English and Japanese.

nameJa (optional)string | undefined
regionNamestring

What a region is called here, singular and plural, in English: Country, Province.

regionNamePluralstring
viewBoxstring

The canvas: 0 0 width height.

widthnumber
heightnumber
wrapsboolean

Whether its east edge is its west edge: a map of the earth is a cylinder cut open, and pans round without stopping.

projectionChizuProjection
insetsChizuInset[]

The regions drawn in boxes of their own.

sourcestring

Where the outlines come from, in a line.

regionsChizuRegion[]

Examples

import { localMap, type ChizuLocalMap } from "@johnmorrisdotca/chizu";

const map: ChizuLocalMap = localMap({ centre: [139.7006, 35.7004], widthMetres: 500 });
console.log(map.kind, map.viewBox, map.projection.kind === "local" && map.projection.metresPerUnit);
// local 0 0 1000 1000 0.5
local 0 0 1000 1000 0.5

What it prints (run when this page was built)

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