はじめに
この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「マップナビゲーションコントロールの表示」についての解説です。このサンプルではNavigationControlの使い方を例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。
以下が本サンプルのデモです。右上に表示されている+/-ボタン等がナビゲーションです。
コードを確認
まずExamplesのコードを見に行きましょう。
日本語サイト
英語サイト
基本的に同じコードですが、英語版はスタイルがMapbox Streets v12にアップグレードされているのでこちらを使用します。Mapbox Streets v11ではデフォルトのプロジェクションがWebメルカトルであるのに対し、Mapbox Streets v12ではGlobe（3D表示された地球）なので、印象がかなり異なります。また、英語版はMapbox GL JS v3が使用されています。
HTML
まずHTMLを見ていきましょう。
以下は地図を表示するエレメントです。
<div id="map"></div>
Mapの作成
JavaScriptのコードを見ていきます。以下のコードはいつも通り、Mapオブジェクトを作成しています。containerで地図を表示するHTMLエレメントのidを指定します。
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [-74.5, 40], // starting position
zoom: 9 // starting zoom
});
NavigationControlの作成
NavigationControlはIControlとして実装されています。そのため、以下のコードのようにNavigationControlをインスタンス化し、Map#addControlで地図上に表示します。
map.addControl(new mapboxgl.NavigationControl());
まとめ
1行のコードでナビゲーションが表示できました。ナビゲーションは様々な地図でよく使用されているパーツです。ぜひ使ってみてください。
おまけ
NavigationControlは以下で実装されています。
オプションは以下のものが定義されています。
例えば以下のようにvisualizePitchをtrueにすると、ピッチに合わせてコンパスも傾きます。
map.addControl(new mapboxgl.NavigationControl({visualizePitch: true}));
挙動は以下でご確認ください。
Discussion