はじめに | Mapbox GL JS

Mapbox GL JSを始める前に、Mapboxへのアクセストークンを取得し、CDNまたはmapbox-gl npmパッケージを使用してMapbox GL JSをプロジェクトに追加する必要があります。

前提条件

Mapbox GL JSを使用するには、Mapboxのアクセストークンが必要です。このアクセストークンは、あなたの地図をMapboxアカウントに関連付けます。アクセストークンの作成と使用に関する詳細は、トークン管理ドキュメントを参照してください。

Internet Explorer - ブラウザサポート

バージョン2.0.0以降、Mapbox GL JSはInternet Explorerのどのバージョンとも互換性がありません。

Internet Explorerをサポートする必要がある場合は、非インタラクティブな地図の場合はStatic Images APIを使用し、インタラクティブな地図の場合はLeafletのような他のライブラリを使用して、Static Tiles APIを使用してください。

Mapbox-GL-JSをインポートまたはインストール

JavaScript


<!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.12.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.12.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>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

プロジェクトでMapbox GL JSを使用するには、Mapbox GL JS CDNを使用してインポートするか、mapbox-gl npmパッケージをインストールする必要があります。

Mapbox CDN

Module bundler

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.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.12.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>

これらのコードがウェブアプリケーションで一緒に動作するのを見るには、ウェブページに地図を表示の例をご覧ください。

トランスパイリング

バージョン 2 以降、Mapbox GL JS は ES6 互換の JavaScript バンドルとして配布されています。これは最新の JavaScript 仕様の構文と API を使用し、すべての主要なモダンブラウザと互換性があります。

この JavaScript バンドルは、メインスレッドと Web Worker 間でコードを共有する方法のため、一部のトランスパイラ変換とは互換性がありません。このアプローチは、バンドルサイズの削減と描画パフォーマンスの向上を目的としています。Mapbox GL JS v2 以降を Webpack や Rollup などのモジュールバンドラと Babel などのトランスパイラと併用する場合、以下の 3 つの方法で互換性を確保できます：

browserslistを使用して互換可能な変換セットをターゲットにする
Mapbox GL JSバンドルのトランスパイリングを明示的に無効にする
バンドルサイズの増加とパフォーマンスの低下を伴うWeb Workerコードをロードおよびトランスパイルする

`browserslist`を使用してES6へのトランスパイリングをターゲットにする

browserslist をサポートするビルドツール（例: @babel/preset-env）を使用している場合、Mapbox GL JS の .browserlistrc に合わせて対象ブラウザリストを設定できます。

このリストは、プロジェクトの 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
});