はじめに
Mapbox GL JSを始める前に、Mapboxへのアクセストークンを取得し、CDNまたはmapbox-gl
npmパッケージを使用してMapbox GL JSをプロジェクトに追加する必要があります。
前提条件
Mapbox GL JSを使用するには、Mapboxのアクセストークンが必要です。このアクセストークンは、あなたの地図をMapboxアカウントに関連付けます。アクセストークンの作成と使用に関する詳細は、トークン管理ドキュメントを参照してください。
バージョン2.0.0以降、Mapbox GL JSはInternet Explorerのどのバージョンとも互換性がありません。
Internet Explorerをサポートする必要がある場合は、非インタラクティブな地図の場合はStatic Images APIを使用し、インタラクティブな地図の場合はLeafletのような他のライブラリを使用して、Static Tiles APIを使用してください。
Mapbox-GL-JSをインポートまたはインストール
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox GL JS map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map', // container ID
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 9 // starting zoom
});
</script>
</body>
</html>
プロジェクトでMapbox GL JSを使用するには、Mapbox GL JS CDNを使用してインポートするか、mapbox-gl
npmパッケージをインストールする必要があります。
JavaScript ファイルと CSS ファイルを HTML ファイルの <head> に含めます。 CSS ファイルは、マップを表示し、ポップアップやマーカーなどの要素を機能させるために必要です。The CSS file is required to display the map and make elements like Popups and Markers work.
<script src='https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css' rel='stylesheet' />
HTML ファイルの body に次のコードを含めます。
<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 = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
});
</script>
これらのコードがウェブアプリケーションで一緒に動作するのを見るには、ウェブページに地図を表示の例をご覧ください。
トランスパイリング
Mapbox GL JS v2はES6互換のJavaScriptバンドルとして配布され、すべての主要なモダンブラウザと互換性があります。
このJavaScriptバンドルは、メインスレッドとWeb Worker間でコードを共有する方法により、一部のBabel変換と互換性がありません。これは、バンドルサイズを削減し描画パフォーマンスを向上させるために行われます。v2をWebpackやRollupとBabelなどのトランスパイラと共に使用している場合、次の3つの方法で互換性を確保できます。
browserslist
を使用して互換可能な変換セットをターゲットにする- Mapbox GL JSバンドルのトランスパイリングを明示的に無効にする
- バンドルサイズの増加とパフォーマンスの低下を伴うWeb Workerコードをロードおよびトランスパイルする
browserslist
を使用してES6へのトランスパイリングをターゲットにする
- @babel/preset-envを使用してブラウザ環境を設定するためにbrowserslistを併用している場合は、次の
browserslist
クエリを使用して互換性のある変換セットを選択してください。
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"not safari < 10",
"not chrome < 51",
"not android < 5",
"not ie < 12"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
これは、プロジェクトのpackage.json
または.browserslistrc
ファイルに指定できます。詳細については、@babel/preset-envドキュメントを参照してください。
Mapbox GL JSのトランスパイリングから明示的に除外する
- アプリケーションの他の部分がES5トランスパイルを必要とする場合は、Mapbox GL JSをトランスパイルから明示的に除外することを検討してください。Webpackを使用している場合は、既存のローダーによるmapbox-glの変換を除外するために、 インポートステートメントで
!
接頭辞を使用できます。詳細については、Webpackローダーのインライン使用ドキュメントを参照してください。
import mapboxgl from '!mapbox-gl';
または
または、webpack.config.js
にBabelのignoreオプションを追加することで、これを中心に設定することもできます。
use: {
loader: 'babel-loader',
options: {
presets: ['my-custom-babel-preset'],
..,
..,
ignore: [ './node_modules/mapbox-gl/dist/mapbox-gl.js' ]
}
}
Web Workerを別々に読み込みおよびトランスパイルする
アプリケーションがES5互換性を必要とする場合、モジュールバンドラを設定してMapbox GL JSのWeb Workerを別々に読み込みおよびトランスパイルする必要があります。これは、バンドルサイズを大幅に増加させ、描画パフォーマンスに悪影響を与えるため、レガシーブラウザのサポートが強く必要な場合にのみ行う必要があります。Mapbox GL JSは、バンドラ固有のworker-loader
プラグインで構成できます。関連するWebpackのworker-loaderやrollup-plugin-worker-loaderを参照してください。
- Webpackを使用している場合は、mapbox-glをインポートする際に
worker-loader
をインラインで使用するように構成できます。
import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
import MapboxWorker from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'; // Workerコードをworker-loaderを使用して別々にロード
mapboxgl.workerClass = MapboxWorker; // ロードされたWorkerをデフォルトの代わりに使用する
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
または
webpack.config.js
でworker-loader
を中心に構成すること もできます。
module.exports = {
module: {
rules: [
{
test: /\bmapbox-gl-csp-worker.js\b/i,
use: { loader: 'worker-loader' }
}
]
}
};
そして、Webpackで読み込まれたWorkerをMapbox GL JSに統合します。
import mapboxgl from 'mapbox-gl/dist/mapbox-gl';
import MapboxWorker from 'mapbox-gl/dist/mapbox-gl-csp-worker';
mapboxgl.workerClass = MapboxWorker;
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
アプリケーションのクライアントサポートのテストを行うには、Mapbox GL JSブラウザサポートを確認の例をご覧ください。