○はじめに

今回は、地理情報に関するサービスを提供するAzure Mapsについて紹介します。Azure Mapsを使うことで、複雑かつ多岐に渡る地理情報を容易にアプリケーションに組み込むことができるようになります。本稿では、Azure Mapsの提供するサービスの紹介といくつかのサービスを使用して実際にアプリケーションに地理情報を組み込む実装方法について説明していきます。

○Azure Mapsとは

Azure Mapsは、最新の地図情報や地理的な付帯情報をアプリケーションに提供する地理空間サービスです。Azure MapsではWebおよびAndroid用のSDKが提供されており、このSDKを使用して地図の表示や住所の検索、目的地への経路の作成などのAzure Mapsが提供するさまざまな種類のサービスをアプリケーションに組み込むことができるようになっています。

○Azure Mapsが提供するサービス

Azure Mapsでは、さまざまな種類の地理情報をアプリケーションに追加することができます。Azure Mapsが提供しているサービスは主に以下の通りです。

・Render Service

Render Serviceは、地図の描画(レンダリング)に関するサービスを提供します。主にラスター形式とベクター形式でのレンダリングをサポートしています。ラスター形式はPNGなどのビットマップデータで地図を表現し、ベクター形式ではxとyの座標情報によって表現される点データと、点データを結んでできる線データや面データを用いて地図を表現します。一般的にラスター形式は衛星写真や航空写真による地図の表示に用いられ、ベクター形式は道路や建物、市区町村の境界線などの明確に境界を持つ地形の表現に用いられています。

・Route Service

Route Serviceはある地点からある地点への経路および所要時間を調べる際に使用することのできるサービスです。このサービスでは、徒歩、車、自転車などの移動手段別の所要時間を、リアルタイムの交通情報や曜日や時間帯に基づく過去の交通データを用いて計算することができます。

・Search Service

Search Serviceでは住所や場所、ランドマークの名称などから位置情報を検索することができます。また、リバースジオコーディングと呼ばれる緯度と経度から住所などを調べることのできる逆引きの検索も行うことができます。

・Timezone Service

Timezone Serviceを使用することで、ある座標の現在・過去・未来のタイムゾーン情報を取得することができます。サマータイムを採用している国や地域において、過去や未来のタイムゾーン情報が取得できることが有用となる場合があります。

・Traffic Service

Traffic Serviceは交通情報を提供するサービスで、リアルタイムの混雑状況や渋滞、事故などの情報を取得することができます。

・Weather Service

Weather Serviceでは特定の場所の気象情報を取得することができます。取得できる気象情報には、天候、降水量、気温、風速などが含まれます。

また以下のサービスは執筆時点でプレビュー版として提供されているサービスです。

・Geolocation Service

このサービスでは、指定したIPアドレスの国コードを取得することができます。この情報を使用して、コンテンツの表示内容を切り替えるような実装をアプリケーションに追加することができます。

・Mobility Service

Mobility Serviceでは、公共交通機関の情報を取得することができます。これにより、公共交通機関の路線情報や運行情報、到着時間などの情報を使った経路の作成などが可能になります。

・Map Creator Service

Map Creator Serviceでは、建物の屋内マップの作成および描画をするためのサービスを提供します。

・Elevation Service

Elevation Serviceは、地球の表面から海抜データを取得することができるWebサービスです。

ここまで紹介したようにAzure Mapsには実にさまざまなサービスが存在しているため、各サービスを組み合わせて使用することでアプリケーションで多様な地理情報を提供できるようになります。

○Azure Mapsを使って地図を描画しよう

ここからは実際にアプリケーションに地理情報を追加していくための実装方法について説明していきます。今回は第一段階として、Azure Mapsが提供するWeb SDKを用いてアプリケーション上に地図を描画する実装を行っていきます。

○Azure Mapsアカウントの作成

まずはAzure Mapsのサービスを利用可能にするために、Azure Mapsアカウントと呼ばれるリソースを作成します。Azureポータルにログインして画面上部の検索ボックスに「maps」と入力し、表示された「Azure Maps アカウント」を選択します。Azure Mapsアカウントの一覧画面が表示されたら、画面上部の「追加」あるいは画面下部に表示されている「Azure Maps アカウントの作成」ボタンを選択します。

「Azure Maps アカウントの作成」画面が表示されたら、必要事項を入力してAzure Mapsアカウントを作成します。「サブスクリプション」および「リソースグループ」は任意のものを選択します。「名前」にはAzure Mapsアカウントの名称を入力します。

価格レベルは「Gen2 (Maps & Location Insights)」を選択します。価格レベルでは旧世代の「Gen1」も選択可能となっていますが、使用できるサービスに制限があることや「Gen2」には無料使用枠が含まれていることから「Gen2」を選択することが推奨されています。Azure Mapsでは、主にタイル(地図のある部分を表した画像ファイル)の要求枚数と、APIの呼び出し回数に応じて課金額が増加する仕組みとなっています。

最後にライセンスとプライバシーに関する声明を読み、同意チェックボックスにチェックを入れます。ここまで入力できたら、「Create」ボタンを選択します。

しばらく待つとAzure Mapsアカウントの作成が完了します。

○地図描画用Webページの作成

Azure Mapsアカウントが作成できたら、地図を描画する画面の実装を行います。今回はHTMLファイルにAzure MapsのWeb用のSDKを組み込んで地図が描画できることを確認していきます。

まずはHTMLファイルを作成して、Azure MapsのSDKを使用できるようにします。ローカルの適当な場所に「index.html」というファイルを作成し、以下のコードを入力していきます。

地図描画用のHTMLファイルの作成(index.html)

Azure Maps Sample

<!– ? Azure Maps Web SDKの読み込み –>

タグ内でAzure MapsのJavascript用SDKであるAzure Maps Web SDKのスクリプトファイルとCSSファイルをCDNから参照して使用できるようにします(?)。

続いて、地図を描画するためのスタイル定義をタグ内に記述していきます。

地図描画用のスタイル定義を追加(index.html)

・・・中略

<!– ? 地図描画用のスタイル定義 –>

html, body {

margin: 0;

}

#myMap {

height: 100vh;

width: 100vw;

}

今回は単純に、画面いっぱいに地図が表示できるようなスタイル定義としています(?)。なお、heightおよびwidthに指定しているvhとvwはViewportの高さと幅に対する割合でサイズを指定する単位です。これらの値をそれぞれ100にすることでビューポートに対して100%の高さと幅のサイズを指定することができ、ブラウザのサイズが変わっても常に画面いっぱいに地図が表示されるようにしています。

最後に、実際に地図を描画する処理にあたる部分の実装を行います。

地図描画処理の実装(index.html)

・・・中略

・・・中略

<!– ? 画面描画時にAzure Maps Web SDKの初期化処理を呼び出す –>

<!– ? 地図描画用の要素 –>

<!– 地図描画用のスタイル定義 –>

html, body {

margin: 0;

}

#myMap {

height: 100vh;

width: 100vw;

}

<!– 画面描画時にAzure Maps Web SDKの初期化処理を呼び出す –>

<!– 地図描画用の要素 –>

index.htmlファイルをWebブラウザで表示すると以下の図のような地図が表示されるかと思います。

マウスやトラックパッドを使って、地図を移動させたり拡大・縮小させたりすることができます。

○まとめ

今回は地理情報関連の情報をアプリケーションに組み込むことのできるAzure Mapsの各種サービスの紹介と、Web SDKを使った地図表示のサンプルアプリケーションの実装方法について説明しました。次回も引き続きAzure Mapsについて取り上げ、サンプルアプリケーションにさまざまなAzure Mapsの機能を追加していく方法について紹介する予定です。WINGSプロジェクト 秋葉龍一著/山田祥寛監修<WINGSプロジェクトについて>テクニカル執筆プロジェクト(代表山田祥寛)。海外記事の翻訳から、主にWeb開発分野の書籍・雑誌/Web記事の執筆、講演等を幅広く手がける。一緒に執筆をできる有志を募集中