Map Canvas MCP

ChatGPT などの MCP Apps ホスト向けの埋め込み型インタラクティブマップです。Worker は地図データと安定した UI ローダーを返します。各ツールの結果は、Cloudflare Static Assets から配信されるコンテンツアドレス指定の Leaflet バンドルを選択するため、変更されていないツールメタデータをリフレッシュしなくても UI を更新できます。ユーザーのブラウザは、表示中の OpenStreetMap タイルを標準のタイルサーバーから直接取得します。

本番エンドポイント

https://map-canvas.android-mxdiego9.workers.dev/mcp

このエンドポイントは公開されており、認証は不要です。

Related MCP server: Mapbox MCP Server

ローカル開発

npm install
npm run check
npm run dev

npm run check は Worker の型チェックを行い、初期化、ツール検出、ツール実行、ウィジェットのリソース読み込みに関する MCP スモークテストを実行します。

ローカル MCP エンドポイントは http://localhost:8787/mcp です。MCP Inspector でテストしてください:

npx @modelcontextprotocol/inspector@latest

デプロイ

ターミナルからデプロイ:

npm run deploy

API キーは不要です。シークレットをソースや wrangler.jsonc に追加しないでください。後で認証を追加する場合は Cloudflare secrets を使用してください。

GitHub Actions でデプロイする

同梱のワークフローは、main へのプッシュのたびにデプロイし、その後、公開エンドポイントに対して本番 MCP スモークテストを実行します。また、Actions タブから手動で実行することもできます。まず、以下のリポジトリの Actions シークレットを追加してください:

• CLOUDFLARE_API_TOKEN: ターゲットアカウントで Workers を編集できるスコープを持つトークン

• CLOUDFLARE_ACCOUNT_ID: ターゲットの Cloudflare アカウント ID

これらの値は GitHub Actions のシークレットに保持され、リポジトリにコミットしてはなりません。

ツール

show_map は、10進数の緯度・経度座標を持つ 1–50 件の場所を受け入れます。シンプルな呼び出し元は引き続き connectPlaces を使用できます。旅行の旅程では、さらに以下を追加できます:

• 日付・時刻のラベルと日付フィルタリング

• カテゴリと確認済み/予定/仮のステータス

• 徒歩、車、タクシー、バス、鉄道、フェリー、飛行機の移動区間

• 模式的な直線接続または実際のルート形状

• 検証済みの場所リンク（フォールバックとして Google Maps の座標リンク）

ウィジェットは、番号付きでカテゴリ別に色分けされたマーカー、旅程パネル、表示のリセット操作、ChatGPT でのオプションの全画面表示を使用します。模式的な移動区間は破線で表示され、明確にラベル付けされるため、ターンバイターンのナビゲーションと誤解されることはありません。

地図データ © OpenStreetMap の貢献者