MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2018.03.27

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

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 のように住所や施設名を使ってのルート検索を行おうとした場合、どうしても日本語の情報量が少ないので厳しいかなという印象です。

 

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

 

バイ

 

 

 

【関連記事】こんな記事も読まれています

2017.07.09

Geocoding API を使って郵便番号から住所を入力するフォーム

みなさん、こんにちは。

よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Maps・・・

続きを読む

2017.03.11

GoogleマップにGeoJSONで図形を描画する

みなさん、こんにちは!

前回、KMLファイルを使って図形を描画する方法を紹介しましたが、今回は GeoJSON ファイルを使って図形を描画する・・・

続きを読む

2017.03.29

Google Maps お問い合わせランキング

みなさん、こんにちは!

マルティスープでは、ブログを開設して1年が経ちました!  思っていたよりも非常に多くのみなさまに閲覧いただいている・・・

続きを読む

 - GIS, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)