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

ChizuLocalMarkerInputtype

A picture to put on a local map, given as the caller has it. See ChizuLocalMarker for what it becomes.

Import it

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

Definition

type ChizuLocalMarkerInput = {
    name?: string;
    nameJa?: string;
    id?: string;
    at: readonly [
        number,
        number
    ];
    svg: string;
    viewBox?: readonly [
        number,
        number,
        number,
        number
    ];
    metresPerUnit?: number;
    size?: readonly [
        number,
        number
    ];
    bearing?: number;
    anchor?: readonly [
        number,
        number
    ];
    class?: string | readonly string[];
};

Members

NameTypeDescription
name (optional)string | undefined

A name for it: its <title>, its label and what a screen reader hears.

nameJa (optional)string | undefined
id (optional)string | undefined
atreadonly [number, number]

Where its anchor goes: longitude and latitude, in degrees.

svgstring

Its picture: a whole <svg viewBox="…">…</svg>, or bare markup with viewBox given. Cleaned on the way in (no script, style sheet, image or outside reference).

viewBox (optional)readonly [number, number, number, number] | undefined

The picture's own window, for bare markup (or to override the <svg>'s): [x, y, width, height] in the picture's units.

metresPerUnit (optional)number | undefined

How many metres a unit of the picture is. Default 1, so a picture drawn in metres is true to size.

size (optional)readonly [number, number] | undefined

Or how big the picture's window is on the ground, [width, height] in metres: the scale is worked out from the width (the height only checks).

bearing (optional)number | undefined

The direction the picture's top points, in degrees clockwise from true north. Default 0.

anchor (optional)readonly [number, number] | undefined

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

class (optional)string | readonly string[] | undefined

Classes for your own style: letters, digits, - and _.

Examples

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

// A 100 m by 60 m pitch, drawn in metres, turned 30° east of north.
const pitch: ChizuLocalMarkerInput = {
  at: [139.7006, 35.7004],
  svg: '<svg viewBox="0 0 100 60"><rect width="100" height="60" fill="#9bd18a"/><line x1="50" y1="0" x2="50" y2="60" stroke="#fff"/></svg>',
  bearing: 30,
  name: "Pitch",
};
console.log(localMap({ centre: [139.7006, 35.7004], widthMetres: 300, markers: [pitch] }).markers.length);
// 1
1

What it prints (run when this page was built)

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