本文へ移動

Chizu地図

SVGの地図を描き、地域を表示範囲に収め、番号付きの注記や地理クイズを英語と日本語の名前で作れます。

「地図」は、土地や場所を図で表したものです。 名前について(英語)

目次

リファレンス · 表示範囲・形・クイズの道具

ChizuLocalOptions型

リファレンスの説明と例は英語です。見出しと目次は日本語です。

What a local map is made of.

インポート

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

定義

type ChizuLocalOptions = ChizuLocalCanvas & {
    id?: string;
    name?: string;
    nameJa?: string;
    data?: ChizuGeoJson | readonly ChizuGeoJson[];
    markers?: readonly ChizuLocalMarkerInput[];
    credits?: readonly string[];
};

メンバー

名前型説明
centrereadonly [number, number]

The middle of the canvas: longitude and latitude, in degrees.

widthMetresnumber

How wide the canvas is on the ground, in metres.

heightMetres (省略可)number | undefined

How tall it is on the ground, in metres. Default: as wide.

metresPerUnit (省略可)number | undefined

How many metres a unit of the canvas is, stated in the map's projection. Default: the longer side over 1,000, so a local canvas is 1,000 across like every other map's.

id (省略可)string | undefined

The map's id. Default local.

name (省略可)string | undefined

Its name in English and Japanese, for the drawing's label.

nameJa (省略可)string | undefined
data (省略可)ChizuGeoJson | readonly ChizuGeoJson[] | undefined

What to draw: GeoJSON (one value or a list), read in the order given, which is the order it is painted in.

markers (省略可)readonly ChizuLocalMarkerInput[] | undefined

Pictures to place, painted over the shapes.

credits (省略可)readonly string[] | undefined

The credit lines for the data, shown in the drawing: "Data © OpenStreetMap contributors, ODbL". Chizu fetches nothing and adds no data of its own: the caller says what it drew from.

例

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

const options: ChizuLocalOptions = {
  centre: [139.7006, 35.7004],
  widthMetres: 400,
  name: "Made-up ground",
  data: { type: "Feature", id: "hall", properties: { kind: "building" }, geometry: { type: "Polygon", coordinates: [[[139.7, 35.7], [139.701, 35.7], [139.701, 35.7006], [139.7, 35.7006], [139.7, 35.7]]] } },
  credits: ["Made-up shapes, for this example"],
};
console.log(localMap(options).regions.map((region) => region.code));
// [ 'hall' ]
[ 'hall' ]

出力(このページを作ったときに実行した結果)

ソースを見るGitHub で編集@johnmorrisdotca/chizu 1.5.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。