Mapbox でルート検索してみた

# 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を使用)で開いた画面を下に示します。

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

![スクリーンショット 2021-03-17 23.12.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/f53d4ad3-db61-df4b-1792-707ee823470d.png)

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

![スクリーンショット 2021-03-17 23.16.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174250/a13b4ec4-4bde-bc74-5c19-003d736343fd.png)


## 3-2. 解説

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

### ・JavaScript・CSSファイル 読込

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

```html
    <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%* に設定します。

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

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

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

```html
    <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*)をブラウザ画面上に配置します。

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

### ・スクリプト記述

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

```html
    <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** に設定します。

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

- **マップ設定**

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

```js
    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**を追加し、ルート検索できるようにします。

```js
    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： 運転道順の表示

https://docs.mapbox.com/jp/mapbox-gl-js/example/mapbox-gl-directions/?size=n_10_n

・GitHub：mapbox-gl-directions

https://github.com/mapbox/mapbox-gl-directions