Skip to main content
Glama
dj-oyu

GSI Vector Tile MCP App

by dj-oyu

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エンドポイントを公開します。

Related MCP server: Interactive Map MCP Server

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

License

MIT

F
license - not found
-
quality - not tested
D
maintenance

Maintenance

Maintainers
Response time
Release cycle
Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/dj-oyu/elysiajs-gsi-gov'

If you have feedback or need assistance with the MCP directory API, please join our Discord server