Mapbox GL JS Seatsは、Mapbox GL JSを基盤としたJavaScriptライブラリであり、シートによるMapbox APIのメータリングと課金を提供します。これはWebGLを使用して、ベクタータイルとMapboxスタイルからインタラクティブなマップをレンダリングします。
料金
- シート単位で課金
- 料金ページの Sessions & user pricing セクションで料金や割引を確認できます
シート とは、あなたのウェブアプリケーション内でMapboxサービスを使用する単一のユーザーを指します。各ユーザーは月間の課金期間中に無制限のベクタータイルAPIとラスタータイルAPIリクエストを使用できます。Mapbox GL JS Seatsのアクセスがアカウントに追加されると、統計ページでシートごとの使用状況を確認できます。無料ティアに含まれるシート数と、無料ティアを超えた場合のシートごとの費用の詳細は、料金ページ で確認できます。
クイックスタート
Mapbox GL JS Seatsにアクセスするには、テクニカルアカウントマネージャーに直接お問い合わせいただくか、セールスチームに連絡 してください。アクセスがアカウントに追加された後、プロジェクトでMapbox GL JS Seatsを使用するには、Mapbox GL JS CDNを使用してインポートする必要があります。
Include the JavaScript and CSS files in the <head> of your HTML file. The CSS file is required to display the map and make elements like Popups and Markers work.
<script src='https://api.mapbox.com/gl-js-seats/v2.13.0/mapbox-gl-seats.js'></script>
<link href='https://api.mapbox.com/gl-js-seats/v2.13.0/mapbox-gl-seats.css' rel='stylesheet' />
Include the following code in the <body> of your HTML file.
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'undefined';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
projection: 'globe' // display the map as a 3D globe
});
map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style
});
</script>
これらのコードがウェブアプリケーションで連携して動作するのを確認するには、ウェブページにマップを表示する の例をご覧ください。
ダウンロード
Mapbox GL JS Seatsのすべてのリソースを単一のZIPファイルでダウンロードすることもできます。例えば、クロスサイトスクリプティングやその他のウェブセキュリティの脆弱性を緩和したい場合に役立ちます。また、CSPディレクティブ も参照してください。
SDKの更新
Mapbox GL JS Seatsのリリースは Mapbox GL JSのリリース と同時に行われます。アプリケーションで新しいバージョンのMapbox GL JS Seatsに更新するには、プロジェクト内でそのバージョンを更新する必要があります。
CSPディレクティブ
クロスサイトスクリプティングやその他のウェブセキュリティの脆弱性を緩和するために、コンテンツセキュリティポリシー（CSP） を使用することができます。Mapbox GL JS Seatsを使用する場合、次のCSPディレクティブが必要です：