MCP 服务器

GSI Vector Tile MCP App

Enables interactive GSI map viewing with layer switching, location search, and tile info retrieval within chat.

README

GSI Vector Tile MCP 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)

処理の流れ

LLMが show-gsi-map ツールを呼び出す
サーバーがツール結果 + ui://gsi-map/mcp-app.html リソースを返す
ホスト（Claude等）がHTMLをsandboxed iframeで表示
UIはLeafletで地理院タイルを描画し、App クラスでホストと双方向通信
ユーザーが地図を操作すると 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）