20
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

AWS AmplifyAdvent Calendar 2021

Day 6

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

Last updated at Posted at 2021-12-05

img


img


この記事は、「AWS Amplify Advent Calendar 2021」の6日目の記事です。

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

先日開催された「JAWS PANKRATION 2021 ~Up till Down~」で、「Amazon Location ServiceとAmplify Geoの構築の比較」というタイトルで発表をしたのもあり、今年色々と調べていた「Amplify Geo」と「Amazon Location Service」について2021年12月現在までの情報をまとめました :bulb:


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


Amazon Location ServiceとAmplify Geo

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

Amplify Geoとは、AWS Amplifyの機能の一部として、Amazon Location Serviceをより手軽に構築できるようにした機能です。Amazon Location Serviceの設定を自動でおこなってくれるラッパーみたいなイメージです。

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

als.mierune.io

img


事前準備

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

↓ 詳細情報 ↓

AWS AmplifyとAmplify UI VueとVue 3でログイン機能を構築してみた


地図表示

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

Amazon Location Service

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

↓ 詳細情報 ↓

Amplify Geo

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

↓ 詳細情報 ↓

Leaflet

公式ではマップライブラリに「MapLibre GL JS」を推奨していますが、マップライブラリの中でも利用ユーザーが多い「Leaflet」というライブラリでも構築できるか試したりもしました。

↓ 詳細情報 ↓


ジオコーディング

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

Amazon Location Service

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

↓ 詳細情報 ↓

Amplify Geo

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

↓ 詳細情報 ↓


ルーティング

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

Amazon Location Service

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

↓ 詳細情報 ↓

Amplify Geo

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


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

手軽に構築をしたいかたは、「Amplify Geo

  1. Amazon Location Serviceよりも手軽に構築可能です
  2. AWSコンソールやロールを自動設定してくれます
  3. ルーティング等の一部機能が現状ではまだ利用できない状態です

独自のカスタマイズをしたいかたは、「Amazon Location Service

  1. Amplify Geoよりも構築方法が難しくなります
  2. AWSコンソールやロールの設定が別途必要になります
  3. MapLibre GL JSを直接利用し様々なカスタマイズが可能です

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


AWS AmplifyとMapLibre GL JSとLeafletとVue.jsについて、他にも記事を書いています。よろしければぜひ。
tags - AWS Amplify
tags - MapLibre GL JS
tags - Leaflet
tags - Vue.js

やってみたシリーズ :grinning:
tags - Try



book

20
9
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?