Mapbox GL JSは、Mapboxの現代的なマッピング技術を使用して、WebマップやWebアプリケーションを構築するためのクライアントサイドのJavaScriptライブラリです。Mapbox GL JSを使用して、WebブラウザやクライアントでMapboxの地図を表示し、ユーザーのインタラクティビティを追加し、アプリケーション内で地図体験をカスタマイズすることができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ガイド</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',
style: 'mapbox://styles/mapbox/streets-v9',
projection: 'globe', // Display the map as a globe, since satellite-v9 defaults to Mercator
zoom: 1,
center: [30, 15]
});
map.addControl(new mapboxgl.NavigationControl());
map.scrollZoom.disable();
map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style
});
// The following values can be changed to control rotation speed:
// At low zooms, complete a revolution every two minutes.
const secondsPerRevolution = 240;
// Above zoom level 5, do not rotate.
const maxSpinZoom = 5;
// Rotate at intermediate speeds between zoom levels 3 and 5.
const slowSpinZoom = 3;
let userInteracting = false;
const spinEnabled = true;
function spinGlobe() {
const zoom = map.getZoom();
if (spinEnabled && !userInteracting && zoom < maxSpinZoom) {
let distancePerSecond = 360 / secondsPerRevolution;
if (zoom > slowSpinZoom) {
// Slow spinning at higher zooms
const zoomDif =
(maxSpinZoom - zoom) / (maxSpinZoom - slowSpinZoom);
distancePerSecond *= zoomDif;
}
const center = map.getCenter();
center.lng -= distancePerSecond;
// Smoothly animate the map over one second.
// When this animation is complete, it calls a 'moveend' event.
map.easeTo({ center, duration: 1000, easing: (n) => n });
}
}
// Pause spinning on interaction
map.on('mousedown', () => {
userInteracting = true;
});
map.on('dragstart', () => {
userInteracting = true;
});
// When animation is complete, start spinning if there is no ongoing interaction
map.on('moveend', () => {
spinGlobe();
});
spinGlobe();
</script>
</body>
</html>
YOUR_MAPBOX_ACCESS_TOKEN
をあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。このページでは、Mapbox GL JSを独自のアプリケーションでどのように使用できるかについて詳しく説明します。すぐに始めたいですか?クイックスタートガイドを参照するか、サンプルを見てみてください。
ユースケース
Mapbox GL JSのユースケースには次のようなものがあります:
- 地理データの可視化とアニメーション
- 地図上の機能のクエリとフィルタリング
- Mapboxスタイルのレイヤー間にデータを配置する
- 地図上でカスタムクライアントサイドデータを動的に表示およびスタイリングする
- 3Dデータの可視化とアニメーション
- プログラムで地図にマーカーやポップアップを追加する
Mapbox GL JSでできることのインスピレーションをさらに知りたい場合は、チュートリアル、サンプル、およびMapboxの顧客ショーケースページをご覧ください。
主要概念
Mapbox GL
Mapbox GL JSの「GL」は、2Dおよび3DのMapbox地図をOpenGLを使用して動的な視覚グラフィックとしてレンダリングするグラフィックライブラリであるMapbox GLを指します。Mapbox GL JSは、追加のプラグインを使用せずに、互換性のあるWebブラウザで動的にMapboxマップをレンダリングします。
クライアントサイドレンダリング
Mapbox GL JSはクライアントサイドレンダリングに依存しています。Mapbox GL JSのマップは、サーバーではなくブラウザでベクタータイルとスタイルルールを組み合わせて動的にレンダリングされるため、ユーザーのインタラクションに応じて地図のスタイルや表示されるデータを変更できます。
「Map」クラス
mapboxgl.Map
クラスは 、すべてのMapbox GL JSプロジェクトの基礎です。このセクションのクションのコードは、ページにマップを追加するのに必要な最小限の内容を示しています:
mapboxgl.accessToken = '<your access token here>';
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
});
accessToken
: このMapbox アクセストークンは、Mapbox GL JSマップをMapboxアカウントに関連付けます。container
: マップが配置されるHTML要素。この例では、IDが"map"
の<div>
要素です。style
: 使用される地図スタイルのスタイルURL。上記の例では、Mapbox Streets v12スタイルを使用しています。style
オプションをMap
コンストラクタに提供しない場合、Mapbox標準スタイルがデフォルトで有効になります。center
: マップの開始位置の座標(経度、緯度の順)。zoom
: マップの初期化時のズームレベル。整数値または小数値である可能性があります。
レイヤー
Mapbox GL JSマップは、視覚要素と地図データを提供する複数のレイヤーから構成されることができます。各レイヤーは、ブラウザでデータを描画する方法に関するルールを提供し、レンダラーはこれらのレイヤーを使用して地図を画面に描画します。
Mapbox GL JSのaddLayer
メソッドは、マップのスタイルにMapboxスタイルのレイヤーを追加します。addLayer
に必要な唯一のパラメータはMapboxスタイルのレイヤーオブジェクトです。また、新しいレイヤーを追加する前に既存のレイヤーのIDを指定するオプションのbefore
パラメータも含めることができます。この引数を省略すると、レンダラーはマップ上にレイヤーを描画します。
Mapbox Standardは、slot
という概念を通じてデータレイヤーを追加しやすくしています。slot
は、既存の土地レイヤーの上に追加されるなど、予め決められたスタイル内の場所ですが、すべてのラベルより下に配置されます。Mapbox Standardの実行時にレイヤーの順序を指定する方法について詳しくを学びましょう。
以下のセクションでは、Mapboxスタイルレイヤーオブジェクトの要素について説明します。
非同期
Mapbox GL JSのレイヤーはリモートであるため、非同期です。したがって、Mapbox GL JSに接続するコードは、適切なタイミングでマップを変更するためにイベントバインディングを使用することがよくあります。たとえば:
map.on('load', () => {
map.addLayer({
id: 'terrain-data',
type: 'line',
source: {
type: 'vector',
url: 'mapbox://mapbox.mapbox-terrain-v2'
},
'source-layer': 'contour'
});
});
この例のコードでは、map.on('load', function() {
を使用して、マップのリソース(スタイルなど)が読み込まれた後にmap.addLayer
を呼び出します。直ちにmap.addLayer
を実行した場合、追加するレイヤーのスタイルがまだ存在しないため、エラーが発生します。
レイヤーソース
新しいレイヤーを追加するときには、ソースを定義する必要があります。ソースはtype
とurl
を受け入れますが、GeoJSON
ソースはurl
を持っていません。各タイプのソースには、それぞれ固有のプロパティがあります:
各ソースタイプについての詳細は、Mapboxスタイル仕様のソースセクションを参照してください。
タイルセットには複数のソースレイヤーと呼ばれるデータのサブセットを含めることができます。たとえば、Mapbox Streetsタイルセットには、道路、公園などのソースレイヤーが含まれています。自分のレイヤーが正しいソースレイヤーを参照していることを確認するためには、レイヤーオブジェクトにsource-layer
(通常は元のファイルの名前)を含める必要があります。次のサンプルをご覧ください:
map.on('load', () => {
map.addLayer({
id: 'rpd_parks',
type: 'fill',
source: {
type: 'vector',
url: 'mapbox://mapbox.3o7ubwm8'
},
'source-layer': 'RPD_Parks'
});
});
Mapbox GL JSのaddSource
メソッドを使用してソースを追加することもできます。この別の方法を使用してもマップのパフォーマンスに差はありませんが、コードをより読みやすく保つことができることがあります。