はじめに
この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「一連の場所にジャンプ」についての解説です。このサンプルはMap#jumpToの使い方に関して例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。
以下が本サンプルのデモです。
コードを確認
まずExamplesのコードを見に行きましょう。
日本語サイト
英語サイト
基本的に同じコードですが、英語版はスタイルがMapbox Streets v12にアップグレードされているのでこちらを使用します。Mapbox Streets v11ではデフォルトのプロジェクションがWebメルカトルであるのに対し、Mapbox Streets v12ではGlobe（3D表示された地球）なので、印象がかなり異なります。また、英語版はMapbox GL JS v3が使用されています。
HTML/CSS
まずHTMLを見ていきましょう。
以下は地図を表示するエレメントです。
<div id="map"></div>
地点の準備
次にJavaScriptのコードを見ていきます。まず、cityCoordinates変数に6地点の座標を格納しています。
const cityCoordinates = [
[100.507, 13.745],
[98.993, 18.793],
[99.838, 19.924],
[102.812, 17.408],
[100.458, 7.001],
[100.905, 12.935]
];
Mapの作成
以下のコードはいつも通り、Mapオブジェクトを作成しています。containerで地図を表示するHTMLエレメントのidを指定します。
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12',
center: [100.507, 13.745],
zoom: 9
});
ジャンプ！
地図のロードが終わったタイミングでジャンプの処理を開始します。map.on('load', () => {/* ここ */})の「ここ」の部分が主な処理なので見ていきます。
cityCoordinates.entries()は配列の各要素のインデックス・値を返すイテレータです（参考資料）。const [index, coordinate] of cityCoordinates.entries()とすることで、indexにインデックス、coordinateに配列の値（つまり、座標情報）が入ってきます。
setTimeoutはタイマーです。第一引数がコールバック関数、第二引数が遅延時間（ミリ秒）です。コールバック関数の中でMap#jumpToを実行して、その地点にジャンプします。jumpToは第一引数にCameraOptionsを取ります。ここでは中心座標（center）のみを指定し、先程のイテレータで取得したcoordinateを設定しています。また、遅延はindexに2秒をかけているので、1つ目の地点は0秒後、2つ目の地点は2秒後に、3つ目の地点は4秒後に・・・と実行されていきます。
for (const [index, coordinate] of cityCoordinates.entries()) {
setTimeout(() => {
map.jumpTo({ center: coordinate });
}, 2000 * index);
}
まとめ
jumpToの使い方を見ました。以下の記事ではflyToの使い方について解説しています。合わせてご参照ください。
Discussion