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

ChizuLocalShapetype

One shape of a local map, in the canvas's units: an area (a closed outline, filled), a line (an open one) or a point. Its id is the Feature's id (or its properties.id, or f1, f2 in the order given); name and nameJa are its properties.name and properties.nameJa (or name:ja); type is properties.kind (water, building, pitch, green, road have a look of their own); classes are properties.class.

Import it

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

Definition

type ChizuLocalShape = {
    id: string;
    kind: "area" | "line" | "point";
    path: string;
    bbox: [
        number,
        number,
        number,
        number
    ];
    centroid: [
        number,
        number
    ];
    name?: string;
    nameJa?: string;
    type?: string;
    classes: string[];
};

Members

NameTypeDescription
idstring
kind"area" | "line" | "point"
pathstring

An area's closed outlines (M x,y L … Z, a ring each; a hole is a ring drawn with the even-odd rule) or a line's open ones; empty for a point.

bbox[number, number, number, number]

The box round it on the canvas: left, top, right, bottom.

centroid[number, number]

Its middle: an area's centre of mass, a line's half-way point, a point itself.

name (optional)string | undefined
nameJa (optional)string | undefined
type (optional)string | undefined
classesstring[]

Examples

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

const gate = { type: "Feature", id: "gate", properties: { name: "North gate" }, geometry: { type: "Point", coordinates: [139.7006, 35.7007] } };
const shape: ChizuLocalShape = localMap({ centre: [139.7006, 35.7004], widthMetres: 200, data: gate }).shapes[0]!;
console.log(shape.id, shape.kind, shape.name, shape.centroid.map(Math.round));
// gate point North gate [ 500, 334 ]
gate point North gate [ 500, 334 ]

What it prints (run when this page was built)

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