本文へ移動

Chizu地図

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

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

目次

解説

計算部分と生成した地図の仕組み

データ・形の計算・ブラウザーの描画の役割を説明します。

仕組み

計算部分は、DOMや依存パッケージを使わず、通常のデータを受け取る関数で構成します。地図の形は、固定した版のNatural Earthから生成します。国名、ISOコード、首都は、固定した版のkuniのデータです。地物の名前には、記録済みのWikidataのデータも使います。計算、描画、ページへの表示、国名、地図データは別々の入口から読み込めます。

元の詳しい説明とソース一覧は、英語の説明に全て残しています。コードの隣に単体テストを置き、e2e/ で実際のブラウザーの操作を確認します。

ドキュメントと生成したデータ

リファレンスは公開するTypeScriptの宣言から作ります。地図データの公開コメントは、scripts/data-docs.mjsを既存のデータ生成処理から呼んで作るため、次の生成でも例を保ちます。コメントだけの更新処理では、上流データや座標の数値を変えません。Pagefindは、作成したドキュメントを端末のブラウザー内で検索します。

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

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