モダンな JavaScript フレームワーク全体で Mapbox GL JS を実装するための、公式のプロダクションレベルの統合パターンに関する包括的なガイドです。
インストール＆ダウンロード
1. ClawHub CLI
レジストリから直接スキルをインストールする最速の方法です。
npx clawhub@latest install mapbox-web-integration-patterns
2. 手動インストール
スキルフォルダを以下のいずれかの場所にコピーしてください
~/.openclaw/skills/ <project>/skills/ 優先順位：ワークスペース > ローカル > バンドル
3. プロンプトのインストール
このプロンプトをOpenClawにコピーするだけで、自動的にインストールされます。
Clawhubを使って mapbox-web-integration-patterns をインストールして。Clawhubがインストールされていない場合は、先にインストールしてください（npm i -g clawhub）。
ダウンロードをご希望ですか？
ZIPアーカイブで生のスキルファイルを取得します。
Mapbox Web 統合パターン とは？
このスキルは、Mapbox GL JS をモダンな Web アプリケーションに統合するための決定的な青写真を提供します。Mapbox create-web-app スキャフォールディングツールに基づき、React、Vue、Svelte、Angular などのフレームワークにおける必須のライフサイクル管理、安全な Token 処理、検索機能の統合を網羅しています。これらの Openclaw Skills パターンに従うことで、開発者はマッピングコンポーネントのパフォーマンスを維持し、メモリリークを防ぎ、保守性を確保することができます。
その核心的価値は、クリーンアップされていない WebGL コンテキストによるメモリリークや、リアクティブフレームワークにおける無限再レンダリングループなど、一般的な落とし穴を防ぐためのフレームワーク固有の実装詳細にあります。シンプルな位置選択機能の構築から、複雑なデータ可視化ダッシュボードまで、これらのパターンは Mapbox GL JS v3.x 以降のための安定した基盤を提供します。
Mapbox Web 統合パターン のユースケース
- Mapbox create-web-app ツールを使用した新しいマッピングプロジェクトの構築。
- Mapbox GL JS の既存の React、Vue、Svelte、Angular アプリケーションへの統合。
- アドレスのオートコンプリートとジオコーディングのための Mapbox Search JS の実装。
- マップを多用する Web アプリにおけるメモリリークとパフォーマンスの問題のデバッグ。
- さまざまなビルド環境全体でのアクセストークンの安全な管理の保証。
Mapbox Web 統合パターン の仕組み
- React の useEffect や Svelte の onMount といった、適切なフレームワークのライフサイクルフック内で Mapbox GL JS ライブラリを初期化します。
- フレームワークのリアクティブシステムによる内部状態の破損を防ぐため、マップインスタンスをリアクティブではない参照または永続的なプロパティに割り当てます。
- 環境変数からアクセストークンを注入しつつ、マップコンテナ、中心座標、ズームレベルを構成します。
- コンポーネントがアンマウントされる際に map.remove() メソッドを呼び出してシステムメモリを解放するよう、フレームワーク固有のクリーンアップリスナーをアタッチします。
- Mapbox Search JS などの追加モジュールをレイヤー化し、インタラクティブなジオコーディングと近接ベースの結果を提供します。
Mapbox Web 統合パターン のセットアップ
これらの Openclaw Skills パターンを開始するには、パッケージマネージャーを介して必要な依存関係をインストールしてください：
# コアの Mapbox GL JS ライブラリをインストール
npm install mapbox-gl@^3.0.0
# React 用の検索コンポーネントをインストール
npm install @mapbox/search-js-react@^1.0.0
# その他のフレームワーク用の検索コンポーネントをインストール
npm install @mapbox/search-js-web@^1.0.0
環境変数が Mapbox アクセストークン（例：VITE_MAPBOX_ACCESS_TOKEN）で構成されていることを確認してください。
Mapbox Web 統合パターン のデータスキーマとタクソノミー
このスキルは、マップの状態とメタデータを管理するために構造化されたアプローチに従います：
| オブジェクト | 説明 | 重要なプロパティ |
|---|---|---|
| マップインスタンス | mapboxgl.Map によって作成されるコアマップオブジェクト | container, style, center, zoom |
| インスタンス参照 | リアクティブではないホルダー（useRef など） | current (マップオブジェクトを保持) |
| Token 設定 | セキュリティ認証情報の管理 | accessToken, 環境変数 |
| 検索プロパティ | ジオコーディングの設定 | proximity, marker, placeholder |
Mapbox Web 統合パターン の高度な機能
- WebGL 2 サポートや改善された TypeScript 型定義を含む、Mapbox GL JS v3.x 用のプロダクション対応パターン。
- ユニバーサルなマッピングライブラリを構築するための、フレームワークに依存しない Web Component 統合。
- Next.js App Router および Pages Router 環境向けの専門的な処理。
- Vue の Proxy ベースのリアクティブ問題に対する詳細な防止戦略。
- 複雑なダッシュボードスタイルのレイアウトのためのマルチマップ Token 管理。
SKILL.md
ローディング
関連するOpenclawのスキル
panda-git-commit
Conventional Commitsへの準拠を保証し、monorepoスコープを自動検出し、複雑な変更を分割するスマートなGitコミットメッセージ生成ツールです。
gstack-skills
アイデア出しから本番デプロイまで、ソフトウェアライフサイクルのあらゆる段階を自動化する包括的な開発ワークフロースイートです。
Wellness Coach Video
ホリスティックなフレームワークやコーチング手法を、インパクトのある教育的および実績紹介動画コンテンツに変換するよう設計された、ウェルネス専門家専用の動画アシスタントです。
Polla 中央クルド語翻訳機
権威ある言語リソースを活用し、英語の情報技術用語やドキュメントを純粋な中央クルド語（ソラニー語）に変換する専門家向けの翻訳エンジンです。
BTC Momentum Trader
BinanceからのリアルタイムのBTC価格モメンタムに基づき、Polymarketのビットコイン5分間スプリント・ベッティングを実行する自動取引スキルです。
特徴*
