はじめに
この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「ルートの表示」についての解説です。このサンプルはMapbox GL Directionsプラグインの使い方に関して例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。
以下が本サンプルのデモです。始点・終点をクリックして指定すると経路探索が行われ、結果が表示されます。また、プロファイル（Traffic, Driving, Walking, Cycling）も選択できます。
Mapbox GL Directionsとは
Mapbox GL DirectionsはMapbox Directions APIを用いて経路探索を行った結果を地図上に表示するためのプラグインです。直接Directions APIを呼び出す場合には様々なパラメータを考慮する必要がありますが、Mapbox GL Directionsを用いることで簡単に結果の取得、地図上への表示が行えます。
ただし、Mapbox GL Directionsはターン・バイ・ターンナビゲーション（カーナビのような、現在位置に合わせて音声案内等をおこなうこと）は行いません。ターン・バイ・ターンナビゲーションを実施したい場合はモバイル用のMapbox Navigaton SDKを使用してください。
コードを確認
まずExamplesのコードを見に行きましょう。
日本語サイト
英語サイト
基本的に同じコードですが、英語版はスタイルがMapbox Streets v12にアップグレードされているのでこちらを使用します。Mapbox Streets v11ではデフォルトのプロジェクションがWebメルカトルであるのに対し、Mapbox Streets v12ではGlobe（3D表示された地球）なので、印象がかなり異なります。また、英語版はMapbox GL JS v3が使用されています。
HTML/CSS
まずHTMLを見ていきましょう。
以下でMapbox GL Directionsを読み込んでいます。
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.css" type="text/css">
以下は地図を表示するエレメントを作成しています。
<div id="map"></div>
Mapの作成
次にJavaScriptのコードを見ていきます。以下のコードはいつも通り、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: [-79.4512, 43.6568],
zoom: 13
});
Mapbox GL Directionsの追加
次にMapbox GL Directionsを追加します。Mapbox GL DirectionsはIControlを実装しているのでMap#addControlで簡単に追加できます。また、Directions APIにアクセスするため、accessTokenが必要となります。
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken
}),
'top-left'
);
見た目の変更
ルートの色等はカスタマイズが可能です。Mapbox GL Directionsでは、以下で定義されるstyleを用いてルート等のレイヤーを作成し、描画しています。
そこで、以下のようにスタイルをカスタマイズしたい項目について自分で定義し、MapboxDirectionsのコンストラクタのoptionsのstylesに設定することで上書きできます。ここでは始点のcircleレイヤーの色を赤色に設定しました。
const style = [
{
id: "directions-origin-point",
type: "circle",
source: "directions",
paint: {
"circle-radius": 18,
"circle-color": "#ff0000"
},
filter: ["all", ["in", "$type", "Point"], ["in", "marker-symbol", "A"]]
}
];
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken,
styles: style,
}),
"top-left"
);
結果は以下のとおりです。
ただし、これを試してみるとcircleがルートのlineの下に隠れてしまっていることに気が付きます。これは以下のコードの通り、option.stylesで定義されたスタイルからレイヤーを作成したあとデフォルトのスタイル（directionsStyle）のレイヤーを作成しているのが原因です。
ここでは始点を表すcircleレイヤーを作成し、その後ルートを表すlineレイヤーが作成されているのでcircleレイヤーがlineレイヤーの下に配置されてしまいます。
そこで、もともとのレイヤー順の通りにしようと思うと、以下の内容を丸々コピペしてきて必要な部分だけをを変更するという手段を取る必要があります。
まとめ
Directions APIの機能を用いて、数行で経路探索・結果表示ができました。
Discussion