はじめに
今回は、地理情報に関するサービスを提供する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アカウントを作成します。「サブスクリプション」および「リソースグループ」は任意のものを選択します。「名前」にはAzure Mapsアカウントの名称を入力します。
価格レベルは「Gen2 (Maps & Location Insights)」を選択します。価格レベルでは旧世代の「Gen1」も選択可能となっていますが、使用できるサービスに制限があることや「Gen2」には無料使用枠が含まれていることから「Gen2」を選択することが推奨されています。Azure Mapsでは、主にタイル（地図のある部分を表した画像ファイル）の要求枚数と、APIの呼び出し回数に応じて課金額が増加する仕組みとなっています。 最後にライセンスとプライバシーに関する声明を読み、同意チェックボックスにチェックを入れます。ここまで入力できたら、「Create」ボタンを選択します。
-
Azure Mapsアカウントの新規作成
しばらく待つとAzure Mapsアカウントの作成が完了します。
地図描画用Webページの作成
Azure Mapsアカウントが作成できたら、地図を描画する画面の実装を行います。今回はHTMLファイルにAzure MapsのWeb用のSDKを組み込んで地図が描画できることを確認していきます。 まずはHTMLファイルを作成して、Azure MapsのSDKを使用できるようにします。ローカルの適当な場所に「index.html」というファイルを作成し、以下のコードを入力していきます。
地図描画用のHTMLファイルの作成（index.html）
<!DOCTYPE html>
<html>
<head>
<title>Azure Maps Sample</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
＜!-- ① Azure Maps Web SDKの読み込み --＞
<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>
</head>
<body>
</body>
</html>
<head>タグ内でAzure MapsのJavascript用SDKであるAzure Maps Web SDKのスクリプトファイルとCSSファイルをCDNから参照して使用できるようにします（①）。
続いて、地図を描画するためのスタイル定義を<style>タグ内に記述していきます。
地図描画用のスタイル定義を追加（index.html）
<head>
・・・中略
＜!-- ② 地図描画用のスタイル定義 --＞
<style>
html, body {
margin: 0;
}
#myMap {
height: 100vh;
width: 100vw;
}
</style>
</head>
今回は単純に、画面いっぱいに地図が表示できるようなスタイル定義としています（②）。なお、heightおよびwidthに指定しているvhとvwはViewportの高さと幅に対する割合でサイズを指定する単位です。これらの値をそれぞれ100にすることでビューポートに対して100%の高さと幅のサイズを指定することができ、ブラウザのサイズが変わっても常に画面いっぱいに地図が表示されるようにしています。 最後に、実際に地図を描画する処理にあたる部分の実装を行います。
地図描画処理の実装（index.html）
<head>
・・・中略
<script type="text/javascript">
function initMap()
{
// Azure Maps Web SDKの初期化 ・・・①-1
let map = new atlas.Map('myMap', {
center: [-122.33, 47.6], // 初期表示時の中心点の座標 ・・・①-2
zoom: 12, // ズームレベルの指定 ・・・①-3
language: 'en-US', // 表示言語の指定 ・・・①-4
style: 'road', // 地図の表示形式の指定 ・・・①-5
// Azure Mapsアカウントの認証情報の設定 ・・・①-6
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Azure Mapsアカウントの主キー>'
}
});
}
</script>
・・・中略
＜!-- ② 画面描画時にAzure Maps Web SDKの初期化処理を呼び出す --＞
<body onload="initMap()">
＜!-- ③ 地図描画用の要素 --＞
<div id="myMap"></div>
</body>
</html>
<script>タグの中にAzure Maps Web SDKの初期化処理を記述します（①-1）。SDKから取得できるatlas.Mapコンストラクタを呼び出すことで初期化が実行されます。コンストラクタの第一引数には、地図を描画するHTML要素のID名を指定します。第二引数には地図を初期表示する際に必要な追加パラメーターをオブジェクトとして設定します。例えば「center」は、地図を初期表示する際に中心点となる座標を指定することができ（①-2）、「zoom」では地図の縮尺を0～22の23段階のズームレベルから指定することができます（①-3）。「language」は地図上の地名表記などの言語を指定することができます（①-4）。執筆時点では日本語表記（ja-JP）も設定はできるものの、日本国内の一部の地名のみの対応に留まっています。「style」は地図の表示形式を指定することができます（①-5）。最も標準的な「road」は地図上に道路および道路標識を表示したもので、「satellite」や「satellite_road_labels」を指定すると衛星写真を使った地図を表示することができます。
また、「authOptions」では、SDKによって地図を描画するために必要なAzure Mapsアカウントに関する情報を設定します（①-6）。「authType」を「subscriptionKey」とした場合、「subscriptionKey」の値にはAzure Mapsアカウントの「認証」メニューに表示されている「主キー」の値を設定します。
-
Azure Mapsアカウントの主キー
これらの初期表示に必要な内容をメソッドとして定義したら、HTMLが読み込まれた際にメソッドが呼び出されるようにします（②）。また地図描画用の要素を
タグ内に追加し、atlas.Mapコンストラクタの第一引数に指定したID名を付与します（③）。ここまで説明した実装内容をまとめたものが以下になります。「Azure Mapsアカウントの主キー」の部分だけご自身の環境の内容に変更し、「index.html」ファイルとして保存します。
最終的なHTMLファイル（index.html）
<!DOCTYPE html>
<html>
<head>
<title>Azure Maps Sample</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
＜!-- Azure Maps Web SDKの読み込み --＞
<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>
＜!-- 地図描画用のスタイル定義 --＞
<style>
html, body {
margin: 0;
}
#myMap {
height: 100vh;
width: 100vw;
}
</style>
<script type="text/javascript">
function initMap()
{
// Azure Maps Web SDKの初期化
var map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
language: 'en-US',
// Azure Mapsアカウントの認証情報の設定
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Azure Mapsアカウントの主キー>'
}
});
}
</script>
</head>
＜!-- 画面描画時にAzure Maps Web SDKの初期化処理を呼び出す --＞
<body onload="initMap()">
＜!-- 地図描画用の要素 --＞
<div id="myMap"></div>
</body>
</html>
index.htmlファイルをWebブラウザで表示すると以下の図のような地図が表示されるかと思います。
-
Webサイトの表示結果
マウスやトラックパッドを使って、地図を移動させたり拡大・縮小させたりすることができます。
まとめ
今回は地理情報関連の情報をアプリケーションに組み込むことのできるAzure Mapsの各種サービスの紹介と、Web SDKを使った地図表示のサンプルアプリケーションの実装方法について説明しました。次回も引き続きAzure Mapsについて取り上げ、サンプルアプリケーションにさまざまなAzure Mapsの機能を追加していく方法について紹介する予定です。
WINGSプロジェクト 秋葉龍一著/山田祥寛監修
＜WINGSプロジェクトについて＞テクニカル執筆プロジェクト(代表山田祥寛)。海外記事の翻訳から、主にWeb開発分野の書籍・雑誌/Web記事の執筆、講演等を幅広く手がける。一緒に執筆をできる有志を募集中
FinOpsを実践するメルカリ、その道のりと気づき、今後の展望 - 前編
