マルティスープ
Staff Blog

2018.03.27

Mapbox でルート検索を試してみた

みんさん、こんにちは。

以前ご紹介した Mapbox について、もう少し説明したいと思います。

前回のブログ

今回は、Mapbox でルート検索を行う方法です。2パターンを試してみました。

1. Mapbox で予め用意されているコントロールを使用する

Mapbox ではルート検索用のコントロールが、プラグインとして用意されています。通常ルート検索するときは、出発地と到着地を指定しなければいけないため、自前でテキストボックス等を用意する必要があるのですが、コントロールを使えば簡単にルート検索を行うことができます。

ルート検索用のコントロールを使用するときは、以下の js と css をロードします。

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />

JavaScript のソースは以下の通りです。「MapboxDirections」を生成し、コントロールに追加します。

// アクセストークン設定
mapboxgl.accessToken='xxxxxxxxxxxxxxxxxxxxx';
// 地図生成
var map = new mapboxgl.Map({
    container: 'mapid',
    center: [139.7, 35.7],
    zoom: 10,
    styles: 'mapbox://styles/mapbox/streets-v9'
});

// Navigation Control
map.addControl(
    new mapboxgl.NavigationControl(), 'bottom-right');

// Directions Control
map.addControl(
    new MapboxDirections({
        accessToken: mapboxgl.accessToken
    }), 'top-left');

以下が実際のサンプルですが、地図上の2点をクリックしてみて下さい。ルート検索が実行され、結果が地図上に表示されます。（残念ながら一部英語ですが） また、Traffic（渋滞？）、driving（車）、walking（徒歩）、Cycling（自転車）を選択することができ、それぞれのルートを描画することができます。

Full Screen

このように、地図上にルートを表示させたい！ ということが目的であれば簡単にできますので、とても便利だと思います。ただし、あくまで描画がメインですので、ルートの所要時間や距離、ルート間のノードを取得したい場合は、「2」の方法でお試しください。

2. ルート検索APIを使用する

REST形式のAPIも用意されていますので、Ajaxを使ってのルート検索もできます。この場合、出発地や到着地の指定、検索結果の反映は自前で行う必要がありますが、細かい情報をJSONで取得できますので、色々なことができますね。

ルート検索APIのURLとパラメータの例です。

https://api.mapbox.com/directions/v5/mapbox/{モード}/{緯度経度}
    ?steps=true&geometries=polyline&access_token={アクセストークン}

  　モード: driving, walking, cycling など
  　緯度経度: 出発地経度,出発地緯度;到着地経度,到着地緯度
  　アクセストークン: Mapxboxのサイトで発行されたアクセストークン

実際使用してみての感想は、緯度経度を指定してのルート検索であれば問題ないと思います。ただし、Google Maps のように住所や施設名を使ってのルート検索を行おうとした場合、どうしても日本語の情報量が少ないので厳しいかなという印象です。

今後の発展を期待しましょう。

バイ