Azure Maps を使って目的地へのルートを検索するRoute to a point of interest using Azure Maps

このチュートリアルでは、Azure Maps アカウントと Route Service SDK を使って、目的地までのルートを検索する方法について説明します。This tutorial shows how to use your Azure Maps account and the Route Service SDK to find the route to your point of interest. このチュートリアルでは、以下の内容を学習します。In this tutorial, you learn how to:

  • マップ コントロール API を使って新しい Web ページを作成するCreate a new web page using the map control API
  • 住所の座標を設定するSet address coordinates
  • Route Service で目的地までの指示を照会するQuery Route Service for directions to point of interest

前提条件Prerequisites

先に進む前に、前のチュートリアルの手順に従って Azure Maps アカウントを作成し、アカウントのサブスクリプション キーを取得してください。Before you proceed, follow the steps in the previous tutorial to create your Azure Maps account, and get the subscription key for your account.

新しいマップの作成Create a new map

次の手順は、マップ コントロール API を使用して埋め込まれた静的 HTML ページの作成方法を示したものです。The following steps show you how to create a static HTML page embedded with the Map Control API.

  1. ローカル コンピューターに新しいファイルを作成し、名前を MapRoute.html にします。On your local machine, create a new file and name it MapRoute.html.

  2. 次の HTML コンポーネントをファイルに追加します。Add the following HTML components to the file:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Map Route</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
        <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    
        <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>
    
        <script>
            var map, datasource, client;
    
            function GetMap() {
                //Add Map Control JavaScript code here.
            }
        </script>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
    
            #myMap {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body onload="GetMap()">
        <div id="myMap"></div>
    </body>
    </html>
    

    HTML ヘッダーに、Azure マップ コントロール ライブラリによってホストされる CSS および JavaScript のリソース ファイルが含まれることに注意してください。Notice that the HTML header includes the CSS and JavaScript resource files hosted by the Azure Map Control library. ページ本体の onload イベントに注目してください。ページの本体が読み込まれると、このイベントによって GetMap 関数が呼び出されます。Note the onload event on the body of the page, which will call the GetMap function when the body of the page has loaded. この関数には、Azure Maps API にアクセスするためのインライン JavaScript コードが含まれます。This function will contain the inline JavaScript code to access the Azure Maps APIs.

  3. GetMap 関数に、次の JavaScript コードを追加します。Add the following JavaScript code to the GetMap function. <Your Azure Maps Key> という文字列は、Maps アカウントからコピーした主キーに置き換えてください。Replace the string <Your Azure Maps Key> with the primary key that you copied from your Maps account.

    //Instantiate a map object
    var map = new atlas.Map("myMap", {
        //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
        authOptions: {
           authType: 'subscriptionKey',
           subscriptionKey: '<Your Azure Maps Key>'
        }
    });
    

    atlas.Map は、ビジュアルと対話型 Web マップのためのコントロールを提供し、Azure マップ コントロール API のコンポーネントです。The atlas.Map provides the control for a visual and interactive web map, and is a component of the Azure Map Control API.

  4. ファイルを保存し、ブラウザーで開きます。Save the file and open it in your browser. この時点でのマップは基本的なものです。ここからさらに開発を加えることができます。At this point, you have a basic map that you can develop further.

    基本的なマップの表示

ルートのレンダリング方法を定義するDefine how the route will be rendered

このチュートリアルでは、ルートの起点と終点の記号アイコンおよびルート経路の線を使用して、単純なルートをレンダリングします。In this tutorial, a simple route will be rendered using a symbol icon for the start and end of the route, and a line for the route path.

  1. マップを初期化した後、次の JavaScript コードを追加します。After initializing the map, add the following JavaScript code.

    //Wait until the map resources are ready.
    map.events.add('ready', function() {
    
        //Create a data source and add it to the map.
        datasource = new atlas.source.DataSource();
        map.sources.add(datasource);
    
        //Add a layer for rendering the route lines and have it render under the map labels.
        map.layers.add(new atlas.layer.LineLayer(datasource, null, {
            strokeColor: '#2272B9',
            strokeWidth: 5,
            lineJoin: 'round',
            lineCap: 'round'
        }), 'labels');
    
        //Add a layer for rendering point data.
        map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
            iconOptions: {
                image: ['get', 'icon'],
                allowOverlap: true
           },
            textOptions: {
                textField: ['get', 'title'],
                offset: [0, 1.2]
            },
            filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
        }));
    });
    

    マップの ready イベントのハンドラーで、ルートの線および起点と終点を格納するためのデータ ソースが作成されます。In the maps ready event handler, a data source is created to store the route line as well as the start and end points. 線レイヤーを作成してデータ ソースにアタッチすることで、ルートの線のレンダリング方法を定義します。A line layer is created and attached to the data source to defined how the route line will be rendered. ルートの線は、青色でレンダリングされます。線幅は 5 ピクセルで、線の接合箇所と線端には丸みを与えています。The route line will be rendered a nice shade of blue with a width of 5 pixels and rounded line joins and caps. このレイヤーをマップに追加する際に、'labels' という値の第 2 パラメーターを渡します。これにより、このレイヤーをマップ ラベルの下にレンダリングするよう指定します。When adding the layer to the map a second parameter with the value of 'labels' is passed in which specifies to render this layer below the map labels. この結果、ルートの線で道路のラベルが覆い隠されないようになります。This will ensure that the route line doesn't cover up the road labels. 記号レイヤーを作成し、データ ソースにアタッチします。A symbol layer is created and attached to the data source. 起点と終点のレンダリング方法は、このレイヤーで指定します。ここでは、各ポイント オブジェクトのプロパティからアイコン画像とテキスト ラベル情報を取得するための式を追加しています。This layer specifies how the start and end points will be rendered, in this case expressions have been added to retrieve the icon image and text label information from properties on each point object.

  2. このチュートリアルでは、Microsoft を起点として設定し、シアトルにあるガソリン スタンドを終点として設定します。For this tutorial, set the start point as Microsoft, and the end point as a gas station in Seattle. マップの ready イベントのハンドラーに、次のコードを追加します。In the maps ready event handler, add the following code.

    //Create the GeoJSON objects which represent the start and end points of the route.
    var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
        title: "Redmond",
        icon: "pin-blue"
    });
    
    var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.3352, 47.61397]), {
        title: "Seattle",
        icon: "pin-round-blue"
    });
    
    //Add the data to the data source.
    datasource.add([startPoint, endPoint]);
    
    map.setCamera({
        bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
        padding: 80
    });
    

    このコードは、ルートの起点と終点を表す 2 つの GeoJSON ポイント オブジェクトを作成し、これらの点をデータソースに追加します。This code creates two GeoJSON Point objects to represent the start and end points of the route and adds the points to the datasource. それぞれの点に、title プロパティと icon プロパティを追加します。A title and icon property is added to each point. 最後のブロックでは、マップの setCamera プロパティを使用して、始点と終点の緯度と経度の情報を使用するカメラ ビューを設定します。The last block sets the camera view using the latitude and longitude information of the start and end points, using the Map's setCamera property.

  3. MapRoute.html ファイルを保存し、ブラウザーを更新します。Save the MapRoute.html file and refresh your browser. マップの中心がシアトルに設定され、起点を示す青色のピンと、終点を示す丸い青色のピンが表示されます。Now the map is centered over Seattle, and you can see the blue pin marking the start point and the round blue pin marking the finish point.

    起点と終点が表示されたマップ

道順の取得Get directions

ここでは、Azure Maps のルート サービス API を使って、指定した起点から終点までのルートを検索する方法について説明します。This section shows how to use Azure Maps route service API to find the route from a given start point to end point. ルート サービスの API では、2 つの場所の間の、最速最短エコ、またはスリリングなルートを計画できます。The route service provides APIs to plan fastest, shortest, eco, or thrilling routes between two locations. また、Azure の広範な履歴トラフィック データベースを使い、任意の日時のルート所要時間を予測することによって、将来のルートを計画することもできます。It also allows users to plan routes in the future by using Azure's extensive historic traffic database and predicting route durations for any day and time. 詳しくは、「Get route directions (ルートの道順を取得する)」をご覧ください。For more information, see Get route directions. map ready eventListener 内に以下の機能をすべて追加し、マップ リソースへのアクセスの準備ができた後で、機能が読み込まれるようにする必要があります。All of the following functionalities should be added within the map ready eventListener to ensure that they load after the map resources are ready to be accessed.

  1. GetMap 関数内に、次の JavaScript コードを追加します。In the GetMap function, add the following to Javascript code.

    // Use SubscriptionKeyCredential with a subscription key
    var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
    
    // Use subscriptionKeyCredential to create a pipeline
    var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);
    
    // Construct the RouteURL object
    var routeURL = new atlas.service.RouteURL(pipeline);
    

    サブスクリプション キーを使用して Azure Maps に対する HTTP 要求を認証するために、SubscriptionKeyCredential によって SubscriptionKeyCredentialPolicy が作成されます。The SubscriptionKeyCredential creates a SubscriptionKeyCredentialPolicy to authenticate HTTP requests to Azure Maps with the subscription key. atlas.service.MapsURL.newPipeline() は、SubscriptionKeyCredential ポリシーを取り込んで、パイプライン インスタンスを作成します。The atlas.service.MapsURL.newPipeline() takes in the SubscriptionKeyCredential policy and creates a Pipeline instance. routeURL は、Azure Maps の Route 操作の URL を表します。The routeURL represents a URL to Azure Maps Route operations.

  2. 資格情報と URL を設定した後、基点から終点までのルートを構築するための次の JavaScript コードを追加します。After setting up credentials and the URL, add the following JavaScript code to construct the route from start to end point. routeURL は、Azure Maps のルート サービスに対して、道順を計算するように要求します。The routeURL requests the Azure Maps route service to calculate route directions. geojson.getFeatures() メソッドを使用して応答から GeoJSON フィーチャー コレクションが抽出され、データ ソースに追加されます。A GeoJSON feature collection from the response is then extracted using the geojson.getFeatures() method and added to the data source.

    //Start and end point input to the routeURL
    var coordinates= [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];
    
    //Make a search route request
    routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
        //Get data features from response
        var data = directions.geojson.getFeatures();
        datasource.add(data);
    });
    
  3. MapRoute.html ファイルを保存し、Web ブラウザーを更新します。Save the MapRoute.html file and refresh your web browser. Maps API と正常に接続されると、次のようなマップが表示されます。For a successful connection with the Maps APIs, you should see a map similar to the following.

    Azure マップ コントロールと Route Service

次の手順Next steps

このチュートリアルでは、以下の内容を学習しました。In this tutorial, you learned how to:

  • マップ コントロール API を使って新しい Web ページを作成するCreate a new web page using the map control API
  • 住所の座標を設定するSet address coordinates
  • ルート サービスで目的地までの道順を照会するQuery the route service for directions to point of interest

次のチュートリアルでは、移動のモードや積み荷の種類など、制限を設定したルート クエリを作成し、同じマップ上に複数のルートを表示する方法について説明します。The next tutorial demonstrates how to create a route query with restrictions like mode of travel or type of cargo, then display multiple routes on the same map.