dayjournal | Try #072 – Amplify GeoとAmazon Location Serviceの構築方法をまとめてみた

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

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

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

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

事前準備

事前準備として、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のロールにポリシーの追加もする必要があります。

↓ 詳細情報 ↓

Amazon Location ServiceとMapLibre GL JSとAWS AmplifyとVue.jsを組み合わせてマップアプリケーションを構築してみた

Amplify Geo

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

↓ 詳細情報 ↓

Amplify GeoとVue.jsを組み合わせてマップアプリケーションを構築してみた

Leaflet

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

↓ 詳細情報 ↓

Amazon Location ServiceとLeafletとAWS AmplifyとVue.jsを組み合わせてマップアプリケーションを構築してみた