Mapbox GL JS

現在のバージョン: v1.6.1 変更ログ

  • カスタムマップスタイル
  • 高速ベクターマップ
  • 他Mapboxツールとの互換性

Mapbox GL JSとは、WebGLを用いてベクター·タイルMapboxスタイルからインタラクティブマップをレンダリングするJavaScriptライブラリです。これはMapbox GLエコシステムの一部であり、C++で記述されたレンダラーであるMapbox Mobileを含み、デスクトップおよびモバイルプラットフォーム用のバインディングを備えています。

クイックスタート

始めるには、アクセス·トークンスタイルURLが必要になります。Mapboxのプロがデザインしたスタイルから選択するか、Mapbox Studioを使用して独自のスタイルを作成できます。

Mapbox CDN

JavaScriptファイルとCSSファイルをHTMLファイルの<head>に含めます。

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v/mapbox-gl.css' rel='stylesheet' />

HTMLファイルの<body>に次のコードを含めます。

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11'
});
</script>

コンテンツセキュリティポリシー(CSP)ディレクティブ

クロスサイトスクリプティングおよびその他Webセキュリティ脆弱性の緩和策として、コンテンツセキュリティポリシー(CSP)を使用してWebサイトのセキュリティポリシーを指定できます。その場合、Mapbox GL JSには以下のCSPディレクティブが必要になります。

worker-src blob: ;
child-src blob: ;
img-src data: blob: ;

Mapboxやその他サービスからスタイルをリクエストするには、追加ディレクティブが必要です。Mapboxでは、このconnect-srcディレクティブを使用できます。

connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com

worker-src blob: ; child-src blob:を有効化できない厳格なCSP環境の場合、個別のMapbox GL JSバンドル(mapbox-gl-csp.jsmapbox-gl-csp-worker.js)があり、この場合ワーカーへのパスを手動で設定する必要があります。

<script src='https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl-csp.js'></script>
<script>
mapboxgl.workerUrl = "https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl-csp-worker.js";
...
</script>

Mapbox CSS

クイックスタートに記載しているCSSは、Mapboxコードが作成したDOM要素をスタイルするために使用します。CSS無しでは、ポップアップやマーカーなどの要素は機能しません。

CSSを提供する最も簡単な方法は、Mapbox CDNを介してドキュメントの先頭に<link>を含めることです。Mapboxモジュールにもバンドルされていますので、CSSを処理できるバンドラーがある場合、 mapbox-gl/dist/mapbox-gl.cssからもCSSをインポートできます。

また、最初のレンダリングでCSSを使用できない場合でも、CSSが提供されるとすぐに、このCSSを必要とするDOM要素が復帰します。