> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt) # Plugins and frameworks Mapbox GL JS plugins include features and functionality that extend the core Mapbox GL JS library. Many plugins are maintained by the Mapbox developer community and welcome questions and contributions on GitHub. > **Note: Help improve this list** > > If you know of a Mapbox GL JS plugin that should be added, removed, or updated here, let us know by using the **Share your feedback** widget on this page. ## User Interface Plugins UI プラグインは、マップ コントロールや、描画ツール、マップ エクスポート ツール、ルート案内やジオコーディング コントロールなど、ユーザーがタッチまたは操作できるその他のものに関連する機能を提供します。 --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-compare](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-compare.bc9d392.480.png) mapbox-gl-compare ユーザーは左右にスワイプして 2 つのマップを比較できます。 [View this project](https://github.com/mapbox/mapbox-gl-compare) [View example](https://docs.mapbox.com/mapbox-gl-js/ja/mapbox-gl-js/ja/example/mapbox-gl-compare/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-controls](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-controls.d29870e.480.png) mapbox-gl-controls ルーラー、スタイルインスペクター、ローカリゼーション、スタイルスイッチャーのコントロールを追加します。 [View this project](https://github.com/bravecow/mapbox-gl-controls) [View demo](https://korywka.github.io/mapbox-controls/preview/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-directions](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-directions.0a18d63.480.png) mapbox-gl-directions ユーザーが地図上に車、徒歩、自転車のルートをプロットできるようにするコントロールを追加します。 Directions API 呼び出しは[リクエストに応じて請求可能](https://docs.mapbox.com/api/navigation/directions/#directions-api-pricing)です。 [View this project](https://github.com/mapbox/mapbox-gl-directions) [View example](https://docs.mapbox.com/mapbox-gl-js/ja/mapbox-gl-js/ja/example/mapbox-gl-directions/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-draw](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-draw.9e0a46a.480.png) mapbox-gl-draw Mapbox GL JS マップでの描画および編集機能のサポートを追加します。 [View this project](https://github.com/mapbox/mapbox-gl-draw) [View example](https://docs.mapbox.com/mapbox-gl-js/ja/mapbox-gl-js/ja/example/mapbox-gl-draw/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-context-menu](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-context-menu.4b60cf3.480.png) mapbox-gl-context-menu Mapbox GL JS にカスタマイズ可能なコンテキスト メニューを追加します。 [View this project](https://github.com/aratcliffe/mapbox-gl-contextmenu) [View demo](https://aratcliffe.github.io/mapbox-gl-contextmenu/demo/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-elevation](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-elevation.bbe4f44.480.png) mapbox-gl-elevation 地形 RGB タイルセットから高度を照会するコントロールを追加します。 [View this project](https://github.com/watergis/mapbox-gl-elevation) [View demo](https://watergis.github.io/mapbox-gl-elevation/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-geocoder](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-geocoder.274c150.480.png) mapbox-gl-geocoder ジオコーダ コントロールを Mapbox GL JS に追加します。ジオコーディング API 呼び出しは[リクエストに応じて課金されます](https://docs.mapbox.com/api/search/geocoding/#geocoding-api-pricing)。 [View this project](https://github.com/mapbox/mapbox-gl-geocoder) [View example](https://docs.mapbox.com/mapbox-gl-js/ja/mapbox-gl-js/ja/example/mapbox-gl-geocoder/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-infobox](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-infobox.3037075.480.png) mapbox-gl-infobox インフォボックスまたはグラデーションを表示するコントロールを追加します。 [View this project](https://github.com/el/infobox-control) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-legend](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-legend.00f1d31.480.png) mapbox-gl-legend マップ スタイルから生成された凡例を表示するコントロールを追加します。 [View this project](https://github.com/watergis/mapbox-gl-legend) [View demo](https://watergis.github.io/mapbox-gl-legend/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-opacity](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-opacity.8d3a2e8.480.png) mapbox-gl-opacity 複数のタイルレイヤーを透明にします。 [View this project](https://github.com/dayjournal/mapbox-gl-opacity) [View demo](https://dayjournal.github.io/mapbox-gl-opacity/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-style-switcher](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-style-switcher.ef876a0.480.png) mapbox-gl-style-switcher スタイルを切り替えるコントロールを追加します。 [View this project](https://github.com/el/style-switcher) [View demo](https://codesandbox.io/p/sandbox/elegant-night-wi9v4) --- ![thumbnail image for Mapbox GL JS plugin mapboxgl-minimap](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-minimap.4d434f5.480.png) mapboxgl-minimap 現在のマップのミニチュア概要を表示するコントロールを追加します。 [View this project](https://github.com/aesqe/mapboxgl-minimap) [View demo](https://aesqe.github.io/mapboxgl-minimap/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-globe-minimap](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-globe-minimap.334c356.480.png) mapbox-gl-globe-minimap 現在のマップの中心点を示すミニチュアの地球儀を表示するコントロールを追加します。 [View this project](https://github.com/chriswhong/mapbox-gl-globe-minimap) [View demo](https://chriswhong.github.io/mapbox-gl-globe-minimap/) ## Map Rendering Plugins マップ レンダリング プラグインは、高度なカスタム レイヤー、マップ ラベル、データ ビジュアライゼーションなど、マップ上に表示されるものに関連する機能を提供します。 --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-language](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-language.7cf1652.480.png) mapbox-gl-language 地図をユーザーの言語に自動的にローカライズします。 [View this project](https://github.com/mapbox/mapbox-gl-language/) [View demo](https://mapbox.github.io/mapbox-gl-language/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-rtl-text](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-rtl-text.e58fedc.480.png) mapbox-gl-rtl-text Mapbox GL JS に右から左へのテキストのサポートを追加します。 [View this project](https://github.com/mapbox/mapbox-gl-rtl-text) [View example](https://docs.mapbox.com/mapbox-gl-js/ja/mapbox-gl-js/ja/example/mapbox-gl-rtl-text/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-traffic](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-traffic.e4b0e44.480.png) mapbox-gl-traffic オプションの切り替えボタンを使用して、マップ上の交通レイヤーを表示または非表示にします。 [View this project](https://github.com/mapbox/mapbox-gl-traffic) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-animated-popup](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/mapbox-gl-animated-popup.5ce03a5.480.png) mapbox-gl-animated-popup Mapbox GL JS のアニメーション ポップアップ コンポーネント。 [View this project](https://nagix.github.io/mapbox-gl-animated-popup/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-rain-layer](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/mapbox-gl-rain-layer.892aa4b.480.png) mapbox-gl-rain-layer Mapbox GL JS のアニメーション雨レイヤー。 [View this project](https://github.com/nagix/mapbox-gl-rain-layer) [View demo](https://nagix.github.io/mapbox-gl-rain-layer/) --- ![thumbnail image for Mapbox GL JS plugin deck.gl](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-deckgl.efcc0d7.480.png) deck.gl 高度な WebGL 視覚化レイヤーを Mapbox GL JS に追加します。 [View this project](https://github.com/uber/deck.gl) --- ![thumbnail image for Mapbox GL JS plugin L7](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-l7.e549192.480.png) L7 WebGL を利用した大規模な地理空間データ視覚化フレームワークを Mapbox GL JS に追加します。 [View this project](https://github.com/antvis/L7) --- ![thumbnail image for Mapbox GL JS plugin flowmap.blue](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-flowmap-blue.18cea13.480.png) flowmap.blue Google スプレッドシートで公開されたスプレッドシートから地理的フロー マップの視覚化をレンダリングします。 [View this project](https://github.com/FlowmapBlue/flowmap.blue) --- ![thumbnail image for Mapbox GL JS plugin TextureMap](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-texturemap.d30a20b.480.png) TextureMap 色覚異常のある人でも Web マップを機能させるためのテクスチャ、パターン、形状。色盲に優しい Mapbox GL マップをデザインします。 [View this project](https://github.com/azavea/texturemap) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-fontawesome-markers](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-fontawesome-markers.c199497.480.png) mapbox-gl-fontawesome-markers Fontwesome アイコンを Mapbox GL JS のデフォルトのマップ マーカーに追加します。 [View this project](https://github.com/chriswhong/mapbox-gl-fontawesome-markers) [View demo](https://chriswhong.github.io/mapbox-gl-fontawesome-markers/) ## Framework Integrations フレームワーク統合プラグインは、外部フレームワークで Mapbox GL JS を使用するのに役立ちます。 --- ![thumbnail image for Mapbox GL JS plugin create-mapbox-web-app](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--create-web-app.bbc9f5f.480.png) create-mapbox-web-app Mapbox GL JS を人気のあるフロントエンド フレームワークに素早く組み込むための CLI ツール。Vanilla JS、React、Angular、Vue、Svelte をサポートしています。`npm create @mapbox/web-app` を実行してビルドを開始します。 [View this project](https://github.com/mapbox/create-web-app) --- ![thumbnail image for Mapbox GL JS plugin react-native](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--react-native-mapbox.cb70bdc.480.png) react-native Mapbox GL JS の [React Native](https://reactnative.dev/) ラッパーを提供します。 [View this project](https://github.com/rnmapbox/maps) --- ![thumbnail image for Mapbox GL JS plugin ngx-mapbox-gl](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-ngx.561f6e3.480.png) ngx-mapbox-gl Mapbox GL JS の [Angular](https://angular.io/) 統合を提供します。 [View this project](https://github.com/Wykks/ngx-mapbox-gl) --- ![thumbnail image for Mapbox GL JS plugin ember-mapbox-gl](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-ember.0d85b3c.480.png) ember-mapbox-gl Mapbox GL JS の [Ember](http://emberjs.com) 統合を提供します。 [View this project](https://github.com/kturney/ember-mapbox-gl) ## Utility Libraries ユーティリティ ライブラリ プラグインは、データ処理や形式変換、オブジェクトの同期、または便利なメソッドを使用した構築などのタスクに機能を提供します。 --- ![thumbnail image for Mapbox GL JS plugin turf](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-turf.3dd994f.480.png) turf 高度な地理空間分析ツールを提供します。 [View this project](https://turfjs.org/) --- ![thumbnail image for Mapbox GL JS plugin expression-jamsession](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-expression-jamsession.7bebb6c.480.png) expression-jamsession [Mapbox Studio の数式](https://www.mapbox.com/help/studio-manual-styles/#use-a-formula) を [式](https://docs.mapbox.com/style-spec) に変換します。 /参照/式)。 [View this project](https://github.com/mapbox/expression-jamsession/) --- ![thumbnail image for Mapbox GL JS plugin simplespec-to-gl-style](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-simplespec-to.251f92d.480.png) simplespec-to-gl-style ["simplestyle-spec"](https://github.com/mapbox/simplestyle-spec/) を使用して GeoJSON スタイルを Mapbox GL スタイルに変換します。 [View this project](https://github.com/mapbox/simplespec-to-gl-style) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-supported](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-supported.1baaffd.480.png) mapbox-gl-supported 現在のブラウザが Mapbox GL JS をサポートしているかどうかを判断します。 [View this project](https://github.com/mapbox/mapbox-gl-supported) [View example](https://docs.mapbox.com/mapbox-gl-js/ja/mapbox-gl-js/ja/example/check-for-support/) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-sync-move](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-sync-move.9fd8664.480.png) mapbox-gl-sync-move 2 つの Mapbox GL JS マップ間の動きを同期します [View this project](https://github.com/mapbox/mapbox-gl-sync-move) --- ![thumbnail image for Mapbox GL JS plugin mapbox-choropleth](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-choropleth.b7930d3.480.png) mapbox-choropleth CSV ソースとジオメトリ ソースからコロプレス レイヤーを作成します。 [View this project](https://github.com/stevage/mapbox-choropleth) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-utils](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-utils.82b6f0a.480.png) mapbox-gl-utils シュガー構文と便利な関数を使用して、レイヤー、ソース、プロパティを管理します。 [View this project](https://github.com/stevage/mapbox-gl-utils) ## Development Tools 開発ツール プラグインは、マップのパフォーマンスやデータ ソースに関する洞察を提供する検査ツールなど、開発プロセスに関連する機能を提供します。 --- ![thumbnail image for Mapbox GL JS plugin create-mapbox-web-app](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--create-web-app.bbc9f5f.480.png) create-mapbox-web-app Mapbox GL JS を人気のあるフロントエンド フレームワークに素早く組み込むための CLI ツール。Vanilla JS、React、Angular、Vue、Svelte をサポートしています。`npm create @mapbox/web-app` を実行してビルドを開始します。 [View this project](https://github.com/mapbox/create-web-app) --- ![thumbnail image for Mapbox GL JS plugin mapbox-gl-framerate](https://docs.mapbox.com/mapbox-gl-js/ja/assets/ideal-img/plugins--mapbox-gl-framerate.83d16fe.480.png) mapbox-gl-framerate マップのレンダリング パフォーマンスを評価するためのフレーム レート コントロール。 [View this project](https://github.com/mapbox/mapbox-gl-framerate)