1. はじめに

この記事は 「Mapboxで地図を表示してみた」、**「Mapbox で地図検索機能を付けてみた」**の続きになります。

・Qiita： Mapboxで地図を表示してみた
https://qiita.com/Haruka-Ogawa/items/7ddbf42e4a7b71a9158c

・Qiita： Mapbox で地図検索機能を付けてみた
https://qiita.com/Haruka-Ogawa/items/47c1fab57f40fbfd034c

今回は、Mapbox でルート検索機能をつけてみます。

2. 準備

2-1. アカウント作成・アクセストークン取得

以下リンク先記事を参考に、 Mapboxのアカウントを作成し、アクセストークンを取得します。

・Qiita：Mapboxで地図を表示してみた > [2. 準備]
https://qiita.com/Haruka-Ogawa/items/7ddbf42e4a7b71a9158c#2-%E6%BA%96%E5%82%99

2-2. スタイル作成

以下リンク先記事を参考に、
日本語で地図を表示・検索できるようにするため、日本語に対応したマップスタイルを取得します。

・Qiita：Mapbox で地図検索機能を付けてみた > [2. 準備] > [2-2. スタイル作成]
https://qiita.com/Haruka-Ogawa/items/47c1fab57f40fbfd034c#2-2-%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E4%BD%9C%E6%88%90

3. コーディング

今回は地図を表示した上で、ルート検索機能を追加し、
指定した2つの地点のルートを表示するようにします。

3-1. サンプル

・HTMLファイル

東京駅周辺（緯度: 35.6809591、経度: 139.7673068）のマップを表示し、
さらに検索した２地点間のルートを表示するような HTMLファイル(map.html)を作成します。

map.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>運転道順の表示</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" />
    
    <style>
    html { height: 100% }
    body { height: 100% }
    #map { height: 100%; width: 100%}
    </style>
</head>

<body>
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>
    <link
    rel="stylesheet"
    href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css"
    type="text/css"
    />
    
    <div id="map"></div>
    
    <script>
    mapboxgl.accessToken = '<アクセストークン>';
    var map = new mapboxgl.Map({
        container: 'map',
        style: '<Style URL>',
        center: [139.7670516, 35.6811673],
        zoom: 15
    });
 
    map.addControl(
        new MapboxDirections({
            accessToken: mapboxgl.accessToken
        })
    );
    </script>
</body>
</html>

・ブラウザ表示

map.html をブラウザ（ここではChromeを使用)で開いた画面を下に示します。

初期で指定した座標 (東京駅周辺) の地図が表示されます。

検索ボックスで、「東京駅」と「東京スカイツリー」を入力すると、
指定した２地点のルートが表示されます。

3-2. 解説

サンプル（map.html)の中身を解説します。

・JavaScript・CSSファイル読込

head 要素に、
以下のように Mapbox を使用するための jsファイル・cssファイルを読み込みます。

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" />

・style属性指定

style 要素にて、HTMLのスタイルを指定します。
ここでは、ウィンドウの高さ height を 100% に設定しています。  また、マップ(id : map)のスタイルを、高さheightを100%、幅 widthを100% に設定します。

    <style>
    html { height: 100% }
    body { height: 100% }
    #map { height: 100%; width: 100%}
    </style>

・mapbox-gl-directions 使用のためのJavaScript・CSSファイル読込

mapbox-gl-directions を使用するための jsファイル・cssファイルを読み込みます。

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

・マップ表示

div要素にて、マップ(id : map)をブラウザ画面上に配置します。

   <div id="map"></div>

・スクリプト記述

script 要素にて、マップ(id:map)を表示し、ルート検索するためのスクリプトを記述します。

    <script>
    mapboxgl.accessToken = '<アクセストークン>';
    var map = new mapboxgl.Map({
        container: 'map',
        style: '<Style URL>',
        center: [139.7670516, 35.6811673],
        zoom: 15
    });
 
    map.addControl(
        new MapboxDirections({
            accessToken: mapboxgl.accessToken
        })
    );
    </script>

以下に、スクリプトの中身を解説します。

アクセストークン設定

第2項で取得したアクセストークンを、
mapboxgl.accessToken に設定します。

mapboxgl.accessToken = '<アクセストークン>';

マップ設定

Map オブジェクトを作成し、ページにマップを表示します。

    var map = new mapboxgl.Map({
        container: 'map',
        style: '<Style URL>',
        center: [139.7670516, 35.6811673],
        zoom: 15
    });

オプションで、マップの細かな設定をすることができます。 ここでは container、style、center、zoom の４項目のオプションを設定しています。

オプション	説明
container	Mapbox GL JSがマップをレンダリングするHTML要素、または要素の文字列ID。
style	マップのスタイル。
center	最初にマップ表示する地理的中心点。
zoom	マップの初期ズームレベル。

container 項目には、’map’ を設定します。
style 項目には、第２項で取得した Style URL を指定します。
center 項目には、東京駅周辺（緯度: 35.6809591、経度: 139.7673068）のマップを表示するために、 [139.7670516, 35.6811673] を設定します。
zoom 項目には、マップの初期ズームレベルとして 15 を設定します。

ルート検索機能追加

Mapbox Directionsを追加し、ルート検索できるようにします。

    map.addControl(
        new MapboxDirections({
            accessToken: mapboxgl.accessToken
        })
    );

addControl メソッドを使用して、コントロールを追加します。
ここでは、Mapbox Directions API の mapbox-gl-directions コントロール ( MapboxDirections )を追加します。

MapboxDirections で accessTokenオプションを設定します。

オプション	説明
accessToken	アクセストークン

accessTokenにアクセストークン mapboxgl.accessToken を設定します。

・GitHub：mapbox-gl-directions
https://github.com/mapbox/mapbox-gl-directions

4. おわりに

今回は、Mapboxを使ってルート検索してみました。
移動手段は、"Traffic", "Driving", "Walking", "Cycling" が選べますが、
電車などの公共交通機関でのルート検索はできないようでした。

それ以外については、ほとんどGoogleマップと同じような操作感でルート検索することができます。

参考情報

・Mapbox | Docs：運転道順の表示

・GitHub：mapbox-gl-directions