さて、本日は Amazon Location Service を使用してみようと思います。とうとう AWS が GIS の世界に進出してきましたね。サービス開始時からどんな感じかずっと気になっていたので今回紹介したいと思います。
Amazon Location Service とは
Amazon Location Service とは、デベロッパーがマップ、特定のポイント (POI)、ジオコーディング、ルーティング、トラッキング、ジオフェンシングなどの位置情報機能を、データセキュリティ、ユーザーのプライバシー、データ品質、コストを犠牲にすることなくアプリケーションに簡単に追加できるフルマネージドサービスです。（出典：AWS）
機能
- Maps・・・開発するアプリにマップを表示したり、マップにデータを追加したりすることができます。
- Place indexes・・・場所検索、ジオコーディング、逆ジオコーディングなどができます。
- Route calculators・・・ルート検索ができます。
- Geofence collections・・・ジオフェンスを使用することができます。
- Trackers・・・デバイスのトラッキングなどができます。
今回試してみること
Amazon Location Service で作成したマップをブラウザ上で表示してみようと思います。
手順
- マップの作成
- AWS Cognito の設定
- マップの表示
1.マップの作成
Esri と HERE のマップが使えるみたいです。今回は Esri Light を使用してみます。
マップを作成するとコンソール上でマップを使うことができるようになります。
2.AWS Cognito の設定
マップの表示には Cognito Identity Pool ID というものをコード内にセットする必要があります。以下のようなサイトを参照し設定をしてください。
3.マップの表示
マップの表示をするためのサンプルコードです。コード内の以下の変数にそれぞれ値を設定してください。
- identityPoolId ・・・AWS Cognito を設定し取得してください。ap-northeast-1:--***** のような形式です。
- mapName ・・・作成したマップ名をセットしてください。
<!-- index.html -->
<html>
<head>
<link
href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
}
#map {
height: 100vh;
}
</style>
</head>
<body>
<!-- map container -->
<div id="map" />
<!-- JavaScript dependencies -->
<script src="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.784.0.min.js"></script>
<script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script>
<script>
// use Signer from @aws-amplify/core
const { Signer } = window.aws_amplify_core;
// configuration
const identityPoolId = "";
const mapName = ""; // Amazon Location Service Map Name
// extract the region from the Identity Pool ID
AWS.config.region = identityPoolId.split(":")[0];
// instantiate a Cognito-backed credential provider
const credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: identityPoolId,
});
/**
* Sign requests made by MapLibre GL JS using AWS SigV4.
*/
function transformRequest(url, resourceType) {
if (resourceType === "Style" && !url.includes("://")) {
// resolve to an AWS URL
url = `https://maps.geo.${AWS.config.region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`;
}
if (url.includes("amazonaws.com")) {
// only sign AWS requests (with the signature as part of the query string)
return {
url: Signer.signUrl(url, {
access_key: credentials.accessKeyId,
secret_key: credentials.secretAccessKey,
session_token: credentials.sessionToken,
}),
};
}
// don't sign
return { url };
}
/**
* Initialize a map.
*/
async function initializeMap() {
// load credentials and set them up to refresh
await credentials.getPromise();
// Initialize the map
const map = new maplibregl.Map({
container: "map",
center: [139.716073, 35.562479], // initial map centerpoint
zoom: 17, // initial map zoom
style: mapName,
transformRequest,
});
map.addControl(new maplibregl.NavigationControl(), "top-left");
}
initializeMap();
</script>
</body>
</html>
上手くマップが表示されました！初期起動時の場所は蒲田駅にしてみました。
さいごに
まだサービスが公開されてから日が浅いので機能はこれからどんどん充実してくるのではないかと思います。また、料金も他のサービスと比べると安いですしアプリ内でちょっと地図を使うくらいだったら Amazon Location Service がファーストチョイスになる日も近いかもしれませんね。次回以降のエントリーで Amazon Location Service を使用したジオコーディングの仕方なども紹介してみようと思います。本日は以上です。
