Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@GSI Vector Tile MCP App show me a map of Tokyo"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
国土地理院の地理院地図Vectorを表示するMCP App。ElysiaJS + Bun で構築。
チャット内にインタラクティブな地図UIが埋め込まれ、地理院タイルの閲覧・住所検索・タイル情報取得ができます。
# 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エンドポイントを公開します。
Related MCP server: MLIT Geospatial MCP Server
# 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# サーバーを起動
bun run startClaude の Settings > Connectors > Add custom connector で http://localhost:3001/mcp を追加。
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"]
}
}
}Tool | Type | Description |
| App (UI付き) | 地理院地図をインタラクティブに表示。レイヤー切替・ズーム・パン操作が可能 |
| Text | GSI住所検索APIで日本国内の住所・地名を検索 |
| Text | 緯度経度からタイル座標(z/x/y)と全レイヤーのURLを取得 |
Parameter | Type | Default | Description |
| number | 35.6812 | 中心緯度 |
| number | 139.7671 | 中心経度 |
| number | 13 | ズームレベル (2-18) |
| string | "std" |
|
| string | - | 地図上に表示するラベル |
Key | Name | Format | Zoom |
| 標準地図 | PNG | 2-18 |
| 淡色地図 | PNG | 2-18 |
| 全国最新写真 | JPG | 2-18 |
| 最適化ベクトルタイル | PBF | 4-17 |
| 白地図 | PNG | 2-14 |
タイルURL形式: https://cyberjapandata.gsi.go.jp/xyz/{layer_id}/{z}/{x}/{y}.{format}
├── 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に現在地を通知
Command | Description |
| UIビルド + サーバー起動 |
| 開発モード（ホットリロード） |
| UIのみビルド（Vite → dist/mcp-app.html） |
| UI + サーバーをバンドル（dist/） |
| サーバー起動（watchモード） |
| stdioモードで起動 |
| テスト実行（26 tests） |
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
MIT
This server cannot be deployed
MCP server for Japan geodata: cadastral lot numbers (chiban) and reverse geocoding, for AI agents.
Ask in plain English, get a rendered, shareable map from live public data. 24 geospatial tools.
AI access to Mapbox docs, API references, style specs, and guides. No token required.
17+ Japan MCP tools (weather/calendar v2/local-pack/enrich). x402 on Base, wallet-free trial.