RegionOverlay — 解説ガイド

01 — Overview

このツールでできること

地域の「形」と「大きさ」を地図上で直感的に比べるためのツールです。

01 ✂️

地域の形状を切り出す

地名を入力して検索するだけで、都道府県・市区町村・丁目の正確な境界形状を自動取得。手動でポリゴン・矩形・円を描くことも可能。

02 🔀

複数の形状を重ねて比較

最大6組の比較ペアを設定し、すべての形状を同じ地図上に重ねて表示。各形状はドラッグで位置を自由に動かせます。

03 📐

面積を数値で比較

各形状の面積（km²・ha・m²）を自動計算。AはBの何%の大きさか、表と比率バーで一覧表示されます。

04 💾

保存・後日読み込み

プロジェクト名をつけてブラウザに保存。次回アクセス時に一覧から選んで読み込めます。JSONファイルでの書き出し・読み込みにも対応。

02 — Interface

画面の構成

ヘッダー・左パネル・右の地図エリアの3ゾーン構成です。

REGIONOVERLAY

💾 保存

📂 読み込み

切り出し

比較

設定

地域を検索

手動で描く

切り出し済み形状

35.6762° N, 139.6503° E

🖥️

ヘッダー

「💾 保存」「📂 読み込み」ボタンでプロジェクトの管理。現在のモード（SELECT / DRAW / COMPARE）がリアルタイム表示されます。

⬅️

左パネル（3タブ）

「切り出し」で形状を追加・管理、「比較」で重ね表示と面積比較、「設定」でベースマップ・スタイルを変更します。

🗺️

地図エリア

切り出した形状と重ね表示が描画されるメイン地図。上部ツールバーでベースマップ切り替えと「⊙ フィット（全体表示）」が可能。

🔵🟠

カラーパレット

形状を追加した順に青・オレンジ・緑・ベージュ・紫・黄の6色が自動割り当て。形状リストにも色チップが表示されます。

03 — How to Use

基本的な使い方（4ステップ）

1

地域を検索して形状を追加する

左パネル「切り出し」タブで地域種別（都道府県 / 市区町村 / 丁目・大字）を選び、テキストボックスに地名を入力します。入力中に候補が自動表示されるのでクリック、またはEnterキーで追加されます。

💡 例：「横浜市」「青葉区」「宮城県」「新宿三丁目」など日本語で入力可能。
同じ名前の地域（仙台市の青葉区・横浜市の青葉区など）は候補に 「青葉区（宮城県 › 仙台市）」のように上位地名が表示されるので区別できます。

2

比較したい地域をもう1つ以上追加する

同じ手順で2つ目・3つ目の地域を追加します。「切り出し済み形状」リストに各形状が色チップ付きで並び、クリックするとその形状にズームします。 ✕ボタンで個別に削除できます。

✏️ 手動描画でも形状を追加できます。「ポリゴン」「矩形」「円」の3モードから選び、地図上をクリックして描画。完了後に名前を入力します。

3

「比較」タブで重ねて表示する

左パネルの「比較」タブを開き、ペア1のA・Bそれぞれに形状を選択。「＋比較ペアを追加」で最大6組のペアを設定できます。「📐 すべて重ねて表示」を押すと、すべての形状が先頭形状の中心に揃えて重ね表示されます。

🎯 「中心に配置」ボタンで全形状を先頭の中心に再配置。各形状はマウスでドラッグして位置を微調整できます。

4

面積を確認し、プロジェクトを保存する

比較パネルに各ペアの面積・A/B比率・比率バーが表示されます。作業が終わったらヘッダーの「💾 保存」ボタンでプロジェクト名をつけて保存。次回「📂 読み込み」から復元できます。

📤 「全データをJSONでエクスポート」で別の端末やブラウザにも移行可能。
「📥 JSONファイルから読み込む」でインポートもできます。

04 — Disambiguation

同じ名前の地域を区別する

「青葉区」は仙台市にも横浜市にも存在します。本ツールでは候補一覧・形状リスト・比較セレクトすべてに上位地名パスを表示し、混同を防ぎます。

検索候補の表示例 — 「青葉区」で検索した場合

🟢

青葉区

宮城県 › 仙台市 › 青葉区

約 302 km²

🔵

青葉区

神奈川県 › 横浜市 › 青葉区

約 35 km²

▲ 形状リストや比較セレクトボックスにも「青葉区（宮城県 › 仙台市）」のように完全名が表示されます

05 — Save & Load

保存・読み込みの仕組み

ブラウザの localStorage に保存するため、インターネット接続なしでも後日読み込めます。

✂️

形状を追加・整理

検索や手動描画で形状を複数追加。比較ペアを設定します。

💾

「保存」ボタンで保存

ヘッダーの「💾 保存」→ プロジェクト名を入力 → 「保存する」。形状データ・比較ペア設定がすべて保存されます。

📂

「読み込み」で復元

「📂 読み込み」→ 一覧からプロジェクトを選択 → 「読み込み」ボタン。すべての形状・設定が復元されます。

📤

JSONでエクスポート（バックアップ）

「読み込み」モーダル下部の「全データをJSONでエクスポート」で全プロジェクトをファイルに書き出し。別端末への移行やバックアップに使えます。

📥

JSONから読み込む（インポート）

エクスポートしたJSONファイルを「読み込み」モーダルの下部ファイル選択から選ぶと、すべてのプロジェクトがインポートされます。

06 — Base Maps

6種類のベースマップ

「設定」タブまたは地図上部のセレクトボックスから切り替えられます。

🗾 国土地理院（標準）

日本の公式地形図。道路・建物・地形が詳細。日本国内の利用に最適。

📷 国土地理院（写真）

航空写真タイル。土地利用・地形を実際の景観で確認できます。

🌸 国土地理院（淡色）

背景が薄い淡色地図。重ねた形状の色が最も見やすいマップ。

🌍 OpenStreetMap

世界規模のオープン地図。海外地域との比較にも対応。

⬛ Stamen Toner

白黒ハイコントラスト。形状の輪郭が最も鮮明に見えます。

🌙 CartoDB Dark

ダークテーマ。夜間・暗い環境での利用やプレゼンに映えます。

07 — Tips

使いこなすためのヒント

🔍

検索は日本語でOK・曖昧でも検索できる

「横浜市」「青葉区」「奈良県吉野郡」など普通の地名をそのまま入力できます。候補を確認してから選択できます。

📦

形状はいくつでも追加できる

形状の数に制限はありません。「比較」タブでその都度どの2つ（または複数ペア）を比べるか選べます。

🖱️

形状をドラッグで自由移動

比較表示中は各形状をドラッグして位置を変えられます。「どの地域の上に重ねるか」を直感的に調整できます。

✏️

行政区画以外も比較できる

手動描画で工業地帯・農地・湖・キャンパスなど任意の範囲を描き、行政境界と比較することも可能です。

⊙

「フィット」で全体を俯瞰

地図ツールバーの「⊙ フィット」ボタンで追加した全形状が収まるようズームが自動調整されます。

🗑️

形状を個別・または一括削除

形状リストの「✕」で1件ずつ削除。「設定」タブの「すべての形状を削除」で一括削除できます。

08 — Technology

技術仕様

🧩

フロントエンド

HTML5 / CSS3 / Vanilla JavaScript のみ。フレームワーク不要。ブラウザで直接開いて使用できます。

🗺️

地図ライブラリ

Leaflet.js 1.9.4 + Leaflet.draw 1.0.4。軽量なオープンソース地図描画ライブラリです。

📡

地名検索 API

Nominatim API（OpenStreetMap）。日本語の地名検索と境界 GeoJSON の取得に対応しています。

📐

面積計算

球面上の多角形面積を球面余弦定理で計算。地球の曲率を考慮した正確な面積を算出します。

💾

データ保存

localStorage にプロジェクトを JSON 形式で保存。ブラウザを閉じても保持され、JSON ファイルで外部にエクスポートも可能。

🎨

カラーパレット

形状追加順に6色（青・オレンジ・緑・ベージュ・紫・黄）を自動割り当て。複数形状を重ねても色で識別できます。