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

ChizuLocalMarkertype

A picture placed on a local map: where it is on the canvas, how many canvas units a unit of the picture is, and the turn that puts its top towards its bearing (the bearing less the map's grid convergence, localConvergence).

Import it

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

Definition

type ChizuLocalMarker = {
    id: string;
    name?: string;
    nameJa?: string;
    classes: string[];
    at: [
        number,
        number
    ];
    bearing: number;
    rotation: number;
    scale: number;
    anchor: [
        number,
        number
    ];
    viewBox: [
        number,
        number,
        number,
        number
    ];
    markup: string;
    bbox: [
        number,
        number,
        number,
        number
    ];
};

Members

NameTypeDescription
idstring
name (optional)string | undefined
nameJa (optional)string | undefined
classesstring[]
at[number, number]

Where its anchor is on the canvas.

bearingnumber

The bearing it was given.

rotationnumber

The turn on the canvas, in degrees clockwise.

scalenumber

Canvas units to a unit of the picture.

anchor[number, number]

The point of the picture that sits on at, in its own units.

viewBox[number, number, number, number]

The picture's window: [x, y, width, height] in its own units.

markupstring

The cleaned markup, ready to sit in an <svg>.

bbox[number, number, number, number]

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

Examples

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

const field = '<svg viewBox="0 0 100 50"><rect width="100" height="50"/></svg>';
const marker: ChizuLocalMarker = localMap({ centre: [139.7, 35.7], widthMetres: 400, markers: [{ at: [139.7, 35.7], svg: field, bearing: 90 }] }).markers[0]!;
console.log(marker.id, marker.scale, marker.rotation);
// marker-1 2.5 90
marker-1 2.5 90

What it prints (run when this page was built)

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