あらすじ

Amazon Location Serviceを試したいと思った
Amazon Location ServiceAWS公式記事を見つけた、がそのままだと期待通り動かなかった
上記公式記事＋αで動かすために必要だったことについてのメモ

AWS Amplify について

https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all
AWS Amplify とは ?
AWS Amplify (Amplify) とは、AWS を用いた Web / モバイルアプリを爆速でリリースするための開発プラットフォームです。AWS Amplify は以下の 4 つから構成されています。

Amazon Location Service について

https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all
Amazon Location Serviceとは ?
Amazon Location Service (Location Service) とは、AWS が提供するフルマネージドの位置情報サービス (LBS : Location Based Service) です。

Amplify Geo について

今回、Amplify Geoを使って、AWS AmplifyからAmazon Location Serviceを使います

https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all
Amplify Geoとは ?
Amplify Geo は Web アプリに簡単に地図と位置情報の機能を追加できるものです。

実施内容

ここからは以下サイトで追加で必要だった部分に焦点を当てて記載していくだけ
実行環境はAWS cloud9, Amazon Linux環境

https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all

Amplify CLIのインストール

参考サイトだとバージョン指定していたが、該当バージョンだと最新環境で一部エラーが出たので最新のcliをインストール

npm i -g @aws-amplify

その後、バージョン確認と初期設定をする

amplify --version
amplify configure

お試し用 React アプリの作成と Amplify CLI によるプロジェクトの初期設定

お試し用 React アプリの作成はサイトそのまま

npx create-react-app amplify-geo-sawattemita
cd amplify-geo-sawattemita

Amplify CLI によるプロジェクトの初期設定

amplify init // 参考サイトには書いてないけどこれが必要、対話形式の入力は元サイトを参考にすればOK

地図リソースの追加

amplify add geo // 対話形式の入力は元サイトを参考にすればOK

以下の部分

そして、以下のコマンドで先ほど設定した内容をバックエンド (AWS 上) に適用 (push) します。Push する内容がこれでいいか聞かれるので、確認の上、Enter をバチーンと叩くと、これでバックエンドの準備は完了です !

amplify push

React アプリに地図を表示する

該当ディレクトリで元サイト記載の通りインストール

npm install aws-amplify

続いて、地図を表示させるためのライブラリをインストールしていきましょう。

npm install maplibre-gl@1 maplibre-gl-js-amplify

次に、src の中にある App.js を以下のようにします。
とりあえず地図をバンッと表示させたいので、そのように書いてます。

App.jsは参考サイトを参照

その後、npm startを実行

さあこれで準備は整いました。プレビューしてみましょう !

npm start

以下の通り東京駅近辺の地図が表示されていればOK（cloud9環境でも表示されました）

https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all

これでAmazon Location Serviceの入り口に立ったはず（Amplify何もわからないです。。）

突然地図が出なくなった

amplifyからAWS Location Serviceにアクセスできなくなっている可能性がある。
amplify configureからAWS_ACCESS_KEY_IDおよびAWS_SECRET_ACCESS_KEYを再設定すれば解決した。

`amplify`から`amplify geo`API経由で`AWS Location Service`をたたきたい

aws-amplify/maplibre-gl-js-amplifyを使えばOK

ただし2023.12時点で以下のようなissueがあり、不便である点はご注意ください

Change marker icons or colors for different locations #214

The drawPoints functionality only accepts an array of coordinate data of markers and options to configure marker elements, but as of now, there is no way to set icons/colors to each marker/location.
You could try creating a custom marker with specific icons/colors using maplibregl marker and add it to a map.

Location毎にそれぞれ異なる icons/colors を設定したい時もあるだろうに..（今は非対応である様子）

`amplify publish`しても反映されない場合

どうやら即反映されないこともある様子、
今回の（私の）ケースでは、.jsファイルを追加するも即反映されず、しばらく（30分）待ったら反映されていた

cloudfrontのキャッシュクリアする方法もある様子

CloudFront --> 該当ID --> キャッシュ削除 --> 対象キャッシュ（全て対象の場合は*）とすればOK

参考