maplibre-mcp

maplibre-mcp

AI エージェントが作業中のMapLibreマップを確認し、検証して、あなたに見せられる MCP サーバーです。

エージェントが1つのプロンプトから作成したハイキングスタイルを、ツェルマット上空に配置したカメラからrender_styleでレンダリングしたものです。

コーディングエージェントはMapLibreのスタイルを書けますが、マップを見ることはできません。そのため、未検証の成果物をあなたに渡したり、独自のレンダラーを作るのに何分も費やしたり、古いMapLibre GL JSやMapboxなど、記憶にあるものに頼ったりします。maplibre-mcpを使えば、エージェントはスタイルをレンダリングして画像を確認し、問題を修正できます。また、ファイルの編集に合わせて再描画されるライブマップへのリンクも受け取れます。これはあなたのマシン上で動作し、APIキーは必要ありません。

特に役立つ用途は次の2つです。

• マップの変化を見ながら、チャットでスタイルを編集すること。「水面をもっと暗くして」「村の中の小道を細くして」と指示できます。エージェントがファイルを編集してレンダリングを確認すると、開いているマップにも反映されます。
• **レイヤーが描画されない理由を調べること。**エージェントは実際のタイルを読み取り、ある場所でどのレイヤーが描画されるか、ほかのレイヤーがなぜ描画されないかを確認して、フィルターを修正します。

サンドボックスやチャットアプリなど、独自のツールを作るためのシェルを使えないエージェントにとって、特に役立ちます。

ウェブサイト · はじめに · 例 · ツール

インストール

Node.js 22以降が必要です。

クライアント	コマンド
Claude Code	claude mcp add maplibre -- npx -y maplibre-mcp
Codex	codex mcp add maplibre -- npx -y maplibre-mcp
Gemini CLI	gemini mcp add maplibre npx -- -y maplibre-mcp
Grok	grok mcp add maplibre -- npx -y maplibre-mcp
VS Code	code --add-mcp '{"name": "maplibre", "command": "npx", "args": ["-y", "maplibre-mcp"]}'

Claude Desktop、Cursor、Windsurf、およびほとんどのほかのクライアントは、このJSONを読み込みます。はじめにでは、それぞれの設定ファイルの保存場所を説明しています。

{
  "mcpServers": {
    "maplibre": {
      "command": "npx",
      "args": ["-y", "maplibre-mcp"]
    }
  }
}

MapLibre GL JSでのレンダリングには、インストール済みのGoogle Chromeを使用します。Chromeがない場合、最初のレンダリングは失敗し、代わりに使用できるChromiumをインストールするコマンドが表示されます。

ブラウザーをインストールできないサンドボックスやCI環境では、サーバーとChromiumを含むコンテナーイメージghcr.io/birkskyum/maplibre-mcpを使用してください。コンテナーとサンドボックスで手順を説明しています。

コマンドライン

シェルで作業するエージェントや人は、MCPを設定せずに、レンダリング、データツール、GL JS APIの検索をコマンドとして実行することもできます。スタイルにはファイルまたはURLを指定します。

npx -y maplibre-mcp render style.json --center 12.57,55.68 --zoom 12
npx -y maplibre-mcp compare before.json after.json --zoom 10
npx -y maplibre-mcp compare-renderers style.json --renderers gl-js,native
npx -y maplibre-mcp describe-sources style.json
npx -y maplibre-mcp debug-layers style.json --center 12.57,55.68 --zoom 14
npx -y maplibre-mcp inspect-tile https://tiles.openfreemap.org/planet --center 12.57,55.68 --zoom 14
npx -y maplibre-mcp describe-gl-js-api Map#flyTo

画像はmap.png、compare.png、renderers.pngに保存されます。保存先は--outで指定することもできます。npx -y maplibre-mcp --helpでオプションを確認できます。詳しくはコマンドラインをご覧ください。スタイルの検証、整形、移行には、@maplibre/maplibre-gl-style-specのgl-style-validate、gl-style-format、gl-style-migrateを使用してください。

ツール

• validate_style は、MapLibre Style Specification に照らしてスタイルを検証し、各問題とそのプロパティへのパスを一覧表示します。
• describe_style_spec は、レイヤータイプ、プロパティ、ソースタイプ、または式を検索し、そのドキュメントと、対応する GL JS および Native のバージョンを表示します。名前のスペルが間違っている場合は、最も近い実在の名称を提案します。
• describe_gl_js_api は、MapLibre GL JS のクラス、メソッド、オプション、またはイベントを検索し、サーバーが描画に使用するバージョン、または別のバージョンの型定義に基づいて、シグネチャ、ドキュメント、デフォルト値、例を表示します。また、Mapbox GL JS のものなど、MapLibre に存在しないメソッドも示します。
• describe_sources は、スタイル内の各ソースの TileJSON、PMTiles ヘッダー、または GeoJSON を読み取り、ソースレイヤーとフィールドを一覧表示して、存在しないソースレイヤーやフィールドを使用しているレイヤーを見つけます。
• inspect_tile は、指定した場所のベクタータイルを読み取り、各ソースレイヤーのジオメトリタイプ、フィールドの値と出現頻度、いくつかのフィーチャーの例を一覧表示します。さらに、ソースのズーム範囲と、そのタイルにないソースレイヤーも表示します。ソースには、スタイル内のソース、Martin のソースのような TileJSON URL、PMTiles アーカイブ、MVT または MLT タイルを含むタイル URL を指定できます。
• debug_layers は、スタイルの各レイヤーが指定した場所とズームで描画されるかどうかを示し、描画されない場合はその理由を説明します。理由には、ソースレイヤーがない、フィルターに一致するものがない（データに存在する値とあわせて表示）、ポリゴンのない塗りつぶしレイヤー、値が 0 または透明になるペイント、スプライトにアイコンがない、などがあります。また、グリフサーバーにフォントスタックがないため、ローカルフォントにフォールバックするテキストも示します。
• render_style は、スタイルを PNG に描画し、マップのエラー、フォントの不足、アイコンの不足を報告します。中心、ズーム、方位、ピッチ、全体が収まる境界、または 3D 地形上の注視点とカメラ位置を指定できます。
• preview_style は、スタイルのライブでインタラクティブなマップへのリンクをユーザーに提供します。スタイルファイルが変更されるとマップにも反映され、書き込み可能なファイルがないエージェントは、変更後のスタイルを同じリンクに送信します。
• render_page は、プラグイン、コントロール、ページのコードなど、スタイルだけでは表現できない内容を確認するために、マップを含むウェブページを描画します。ページのエラーや失敗したリクエストを報告し、最初にページ内でスクリプトを実行することもできます。
• compare_styles は、スタイルの2つのバージョンを同じカメラで描画し、変更前、変更後、それらの差分を赤で示した1枚の画像を返します。
• compare_renderers は、1つのスタイルを2つのレンダラーで描画して同様に比較します。たとえば、ウェブとモバイルでスタイルが同じように表示されるかを確認できます。
• show_map は、MCP Apps に対応するクライアントで、OpenFreeMap のベースマップ上に GeoJSON レイヤーとマーカーを表示した、インタラクティブなマップをユーザーに見せます。
• martin_list_sources は、Martin サーバーが提供するタイル、スプライト、フォント、スタイルを、スタイルで使用する URL とあわせて一覧表示します。
• search_ecosystem は、Make with MapLibre を検索し、SDK、プラグイン、ルーティング、ジオコーディング、スタイリング、タイル作成用ライブラリ、ホスト型 API、製品、コンサルティング会社を、種類とプラットフォームで絞り込んで、リンクとライブデモを表示します。
• find_basemaps は、Make with MapLibre にあるベースマップを一覧表示します。スタイル URL またはタイルソース、API キーの要否、プロバイダーがマップ上に求める帰属表示またはロゴも表示します。

Make with MapLibre のデータは © Birk Skyum に帰属し、CC BY 4.0 のもとで提供されています。どちらのツールも、最後にクレジットを付記します。

スタイルを受け取るツールでは、スタイルをオブジェクト（style）、URL（url）、またはファイル（path。サーバーの実行場所からの相対パス）として指定できます。ツールのリファレンスにすべてのパラメーターが記載されています。

ツールセット

ツールは、所属する MapLibre プロジェクトごとにグループ化されています。デフォルトでは style、gl-js、ecosystem が有効です。ほかのツールセットは --toolsets または MAPLIBRE_MCP_TOOLSETS 環境変数で選択でき、all を指定するとすべてのツールセットが有効になります。

npx -y maplibre-mcp --toolsets style,gl-js,martin

ツールセット	追加される機能
style	validate_style、describe_style_spec、describe_sources、inspect_tile、debug_layers
gl-js	MapLibre GL JS によるレンダリング、render_page、preview_style、describe_gl_js_api、show_map
native	MapLibre Native によるレンダリング
martin	Martin サーバーによるレンダリング、および martin_list_sources
ecosystem	Make with MapLibre のカタログを読み込む search_ecosystem と find_basemaps

いずれかのレンダラーが有効な場合は render_style と compare_styles が使え、2つ以上のレンダラーが有効な場合は compare_renderers も使えます。MapLibre Native によるレンダリングには追加のパッケージが必要です。また、Martin によるレンダリングには、レンダリング機能を備えた Martin ビルドが必要です。どちらもレンダリングで説明しています。

リモートサーバー

--http を指定すると、stdio の代わりに http://127.0.0.1:3100/mcp で Streamable HTTP を提供します。--host と --port でアドレスを変更できます。ループバックアドレスでは、localhost からのリクエストにのみ応答します。それ以外のアドレスでは、ファイルの読み書きは行いませんが、指定された URL は自身のネットワークから引き続き取得します。また、認証機能がないため、認証機能を備えたプロキシの背後に配置してください。詳しくはリモートサーバーをご覧ください。

開発

npm install
npm test
npm run dev:site

ライセンス

MIT © 2026 Birk Skyum