GSI Vector Tile App

国土地理院の地理院地図Vectorを表示するMCP App。ElysiaJS + Bun で構築。

チャット内にインタラクティブな地図UIが埋め込まれ、地理院タイルの閲覧・住所検索・タイル情報取得ができます。

Quick Start

# bunx で直接起動（npm公開後）
bunx elysiajs-gsi-gov

# または clone して起動
git clone https://github.com/dj-oyu/elysiajs-gsi-gov.git
cd elysiajs-gsi-gov
bun install
bun run start

サーバーは http://localhost:3001/mcp でMCPエンドポイントを公開します。

Usage

# UI をビルドしてサーバー起動
bun run start

# 開発モード（UI + サーバーのホットリロード）
bun run dev

# stdio モード（Claude Desktop / Claude Code から直接接続）
bun run serve:stdio

# ビルドのみ（UI + サーバーを dist/ にバンドル）
bun run build:all

# テスト実行
bun test

Claude Desktop / Claude Code から使う

Streamable HTTP（リモート接続）

# サーバーを起動
bun run start

Claude の Settings > Connectors > Add custom connector で http://localhost:3001/mcp を追加。

stdio（直接接続）

claude_desktop_config.json に追加:

{
  "mcpServers": {
    "gsi-map": {
      "command": "bun",
      "args": ["run", "serve:stdio"],
      "cwd": "/path/to/elysiajs-gsi-gov"
    }
  }
}

または、ビルド済みバイナリを使う場合:

{
  "mcpServers": {
    "gsi-map": {
      "command": "bun",
      "args": ["/path/to/elysiajs-gsi-gov/dist/index.js", "--stdio"]
    }
  }
}

MCP Tools

Tool	Type	Description
show-gsi-map	App (UI付き)	地理院地図をインタラクティブに表示。レイヤー切替・ズーム・パン操作が可能
search-location	Text	GSI住所検索APIで日本国内の住所・地名を検索
get-tile-info	Text	緯度経度からタイル座標(z/x/y)と全レイヤーのURLを取得

show-gsi-map のパラメータ

Parameter	Type	Default	Description
lat	number	35.6812	中心緯度
lon	number	139.7671	中心経度
zoom	number	13	ズームレベル (2-18)
layer	string	"std"	std / pale / seamlessphoto / optimal_bvmap
label	string	-	地図上に表示するラベル

GSI Tile Layers

Key	Name	Format	Zoom
std	標準地図	PNG	2-18
pale	淡色地図	PNG	2-18
seamlessphoto	全国最新写真	JPG	2-18
optimal_bvmap	最適化ベクトルタイル	PBF	4-17
blank	白地図	PNG	2-14

タイルURL形式: https://cyberjapandata.gsi.go.jp/xyz/{layer_id}/{z}/{x}/{y}.{format}

Architecture

├── index.ts           # ElysiaJS HTTP エントリポイント
├── server.ts          # MCP Server（ツール・リソース登録）
├── mcp-app.html       # 地図UI ソース
├── src/mcp-app.ts     # 地図UI ロジック（Leaflet + GSIタイル）
├── vite.config.ts     # Vite で UI を単一HTMLにバンドル
├── dist/
│   ├── index.js       # バンドル済みサーバー (bun build)
│   └── mcp-app.html   # バンドル済みUI (vite-plugin-singlefile)
├── server.test.ts     # ユニットテスト (19 tests)
└── index.test.ts      # インテグレーションテスト (7 tests)

処理の流れ

1. LLMが show-gsi-map ツールを呼び出す
2. サーバーがツール結果 + ui://gsi-map/mcp-app.html リソースを返す
3. ホスト（Claude等）がHTMLをsandboxed iframeで表示
4. UIはLeafletで地理院タイルを描画し、App クラスでホストと双方向通信
5. ユーザーが地図を操作すると updateModelContext() でLLMに現在地を通知

Scripts

Command	Description
bun run start	UIビルド + サーバー起動
bun run dev	開発モード（ホットリロード）
bun run build	UIのみビルド（Vite → dist/mcp-app.html）
bun run build:all	UI + サーバーをバンドル（dist/）
bun run serve	サーバー起動（watchモード）
bun run serve:stdio	stdioモードで起動
bun test	テスト実行（26 tests）

Tech Stack

• Bun - Runtime & package manager
• ElysiaJS - Web framework
• MCP SDK - Model Context Protocol
• MCP Apps - Interactive UI extension
• Leaflet - Map library
• Vite + vite-plugin-singlefile - UI bundler
• 国土地理院タイル - Map data source

License

MIT