Amplify GeoとAmazon Location Serviceの構築方法をまとめてみた

![img](https://day-journal.com/memo/images/try-072_00.gif)

<br>

![img](https://day-journal.com/memo/images/try-072_01.png)

<br>

この記事は、「[AWS Amplify Advent Calendar 2021](https://qiita.com/advent-calendar/2021/amplify)」の6日目の記事です。

### Amplify GeoとAmazon Location Serviceの構築方法をまとめてみました :tada:  

先日開催された「[JAWS PANKRATION 2021 ~Up till Down~](https://jawspankration2021.jaws-ug.jp)」で、「Amazon Location ServiceとAmplify Geoの構築の比較」というタイトルで発表をしたのもあり、今年色々と調べていた「[Amplify Geo](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js)」と「[Amazon Location Service](https://aws.amazon.com/jp/location)」について2021年12月現在までの情報をまとめました :bulb: 

<br>

Comparison of Building Amazon Location Service and Amplify Geo (Amazon Location ServiceとAmplify Geoの構築の比較)

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vToU8gAAYzFkXkYBWimdVT89JpMcBMMbaTyM3-Na6Tdo5KsrMpszNziLt0vDFlhjhTMrnbyKHVFxuRa/embed?start=false&loop=false&delayms=3000" frameborder="0" width="710" height="428" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

<br>

## Amazon Location ServiceとAmplify Geo
[Amazon Location Service](https://aws.amazon.com/jp/location)とは、AWS内で利用できる位置情報アプリケーションを構築するためのサービスになります。現時点の機能として、地図表示機能・住所検索機能・ルート検索機能・ジオフェンス機能・トラッキング機能の5種類を利用できます。

[Amplify Geo](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js)とは、AWS Amplifyの機能の一部として、Amazon Location Serviceをより手軽に構築できるようにした機能です。Amazon Location Serviceの設定を自動でおこなってくれるラッパーみたいなイメージです。

実際の機能を確認できるWebアプリケーションを、社内ハッカソンで構築しまして、ユーザー登録するだけでどなたでも利用可能なのでゼヒお試しください。Amazon Location Serviceで現状まだ対応されていない、背景地図の日本語スタイルを独自に構築したり、各機能をマップライブラリと連携した実装をおこなっています。

#### [als.mierune.io](https://als.mierune.io)

![img](https://day-journal.com/memo/images/try-072_00.gif)

<br>

## 事前準備

事前準備として、AWS AmplifyとVue.jsのログイン機能までの設定をしておきます。今回はフレームワークにVue.jsを選択しましたが、React等の他のフレームワークで構築することも可能です。

↓ 詳細情報 ↓

[AWS AmplifyとAmplify UI VueとVue 3でログイン機能を構築してみた](https://day-journal.com/memo/try-067)

<br>

## 地図表示
地図表示は、マップスタイルを選択することで様々な背景地図を利用することができる機能です。

#### Amazon Location Service
Amazon Location Serviceでは、マップスタイルと認証情報を定義できますが、マップを定義する機能はないため、[MapLibre GL JS](https://maplibre.org)というマップライブラリを利用します。また、AWSコンソールでAmazon Location Mapsの設定とAmplifyのロールにポリシーの追加もする必要があります。

↓ 詳細情報 ↓

https://qiita.com/dayjournal/items/b131fe834e957f62575f

#### Amplify Geo
Amplify Geoで構築する場合は、2つのコマンドだけで完了になります。そして、フロントエンド構築時にMapLibreとラッパーライブラリを利用します。ラッパーライブラリを利用することで、手軽に背景地図を表示することが可能です。また、マーカーも手軽に追加することも可能です。

↓ 詳細情報 ↓

https://qiita.com/dayjournal/items/2aa8a29adc208739c375

#### Leaflet
公式ではマップライブラリに「[MapLibre GL JS](https://maplibre.org)」を推奨していますが、マップライブラリの中でも利用ユーザーが多い「[Leaflet](https://leafletjs.com)」というライブラリでも構築できるか試したりもしました。

↓ 詳細情報 ↓

https://qiita.com/dayjournal/items/5bbcec6ed51367598069

<br>

## ジオコーディング
ジオコーディングは、キーワードを指定することで該当する住所データを取得することができる機能です。

#### Amazon Location Service
Amazon Location Serviceでは、フロントエンド構築時にAWS SDKを利用する必要があります。また、AWSコンソールでAmazon Location Place indexesの設定とAmplifyのロールにポリシーの追加もする必要があります。

↓ 詳細情報 ↓

https://qiita.com/dayjournal/items/ff803c448d5419398e1e

#### Amplify Geo
Amplify Geoで構築する場合は、地図表示と同じく2つのコマンドだけで完了になります。そして、フロントエンド構築時にAmplifyからジオコーディング機能を利用し、住所データを取得することが可能です。

↓ 詳細情報 ↓

https://qiita.com/dayjournal/items/ecf954bcf43206f1b093

https://qiita.com/dayjournal/items/5383e6c72bb87877188a

<br>

## ルーティング
ルーティングは、出発地と目的地を指定することでルートデータを取得することができる機能です。

#### Amazon Location Service
Amazon Location Serviceでは、フロントエンド構築時にAWS SDKを利用する必要があります。また、AWSコンソールでAmazon Location Route calculatorsの設定とAmplifyのロールにポリシーの追加もする必要があります。

↓ 詳細情報 ↓

https://qiita.com/dayjournal/items/1555da53a577602a195c

#### Amplify Geo
2021年12月現在、まだルーティングの機能は実装されていないようです。

<br>

#### Amplify GeoとAmazon Location Serviceの構築方法をまとめました :thumbsup: 

**手軽に構築をしたいかたは、「[Amplify Geo](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js)」**
1. Amazon Location Serviceよりも手軽に構築可能です
2. AWSコンソールやロールを自動設定してくれます
3. ルーティング等の一部機能が現状ではまだ利用できない状態です

**独自のカスタマイズをしたいかたは、「[Amazon Location Service](https://aws.amazon.com/jp/location)」**
1. Amplify Geoよりも構築方法が難しくなります
2. AWSコンソールやロールの設定が別途必要になります
3. MapLibre GL JSを直接利用し様々なカスタマイズが可能です

他の機能についても引き続き探っていきたいと思います :thumbsup:

<br>

AWS AmplifyとMapLibre GL JSとLeafletとVue.jsについて、他にも記事を書いています。よろしければぜひ。
<a href="https://day-journal.com/memo/tags/AWS-Amplify" target="_blank">tags - AWS Amplify</a>
<a href="https://day-journal.com/memo/tags/MapLibreGLJS" target="_blank">tags - MapLibre GL JS</a>
<a href="https://day-journal.com/memo/tags/Leaflet" target="_blank">tags - Leaflet</a>
<a href="https://day-journal.com/memo/tags/Vue-js" target="_blank">tags - Vue.js</a>

やってみたシリーズ :grinning:
<a href="https://day-journal.com/memo/tags/Try" target="_blank">tags - Try</a>

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://day-journal.com/memo/images/etc/book.png" alt="book"></a>