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

ChizuGeoJsontype

GeoJSON as the engine reads it: a Feature, a FeatureCollection, or a bare geometry, in the loose shape JSON.parse and an imported .json file give (type is any string, and is checked as the data is read). Points, MultiPoints, LineStrings, MultiLineStrings, Polygons, MultiPolygons and GeometryCollections are drawn; coordinates are [longitude, latitude] in degrees, a third number (height) is ignored.

Import it

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

Definition

type ChizuGeoJson = {
    type: string;
    id?: string | number;
    properties?: Readonly<Record<string, unknown>> | null;
    geometry?: ChizuGeoJson | null;
    geometries?: readonly ChizuGeoJson[];
    features?: readonly ChizuGeoJson[];
    coordinates?: unknown;
};

Members

NameTypeDescription
typestring
id (optional)string | number | undefined
properties (optional)Readonly<Record<string, unknown>> | null | undefined
geometry (optional)ChizuGeoJson | null | undefined
geometries (optional)readonly ChizuGeoJson[] | undefined
features (optional)readonly ChizuGeoJson[] | undefined
coordinates (optional)unknown

Examples

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

const pitch: ChizuGeoJson = {
  type: "Feature",
  id: "pitch",
  properties: { name: "Pitch", kind: "pitch" },
  geometry: { type: "Polygon", coordinates: [[[139.7, 35.7], [139.7012, 35.7], [139.7012, 35.7008], [139.7, 35.7008], [139.7, 35.7]]] },
};
console.log(localMap({ centre: [139.7006, 35.7004], widthMetres: 200, data: pitch }).shapes.map((shape) => shape.kind));
// [ 'area' ]
[ 'area' ]

What it prints (run when this page was built)

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