Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Haruka-Ogawa

Mapbox でルート検索してみた

Last updated at Posted at 2021-03-17

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

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

スクリーンショット 2021-03-17 23.16.00.png

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

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?