Amazon Location Serviceを試したい

## あらすじ
- Amazon Location Serviceを試したいと思った
- Amazon Location Service[AWS公式記事](https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all
)を見つけた、がそのままだと期待通り動かなかった
- 上記公式記事＋αで動かすために必要だったことについてのメモ

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


## 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 アプリの作成はサイトそのまま

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

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

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

#### 地図リソースの追加

```bash
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`は[参考サイト](https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all)を参照

その後、`npm start`を実行

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

```
npm start
```

以下の通り東京駅近辺の地図が表示されていればOK（cloud9環境でも表示されました）
> https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all

![スクリーンショット 2023-12-18 1.40.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/72671d06-959c-74ac-662a-4021c9b9672d.png)


これで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

https://github.com/aws-amplify/maplibre-gl-js-amplify/blob/main/API.md

https://github.com/aws-samples/amazon-location-amplify-ui-geo-explore?tab=readme-ov-file

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

https://github.com/aws-amplify/maplibre-gl-js-amplify/issues/214

> 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分）待ったら反映されていた

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

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

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

https://qiita.com/nomi3/items/87f6bfd3f4237da47278

# 参考

https://docs.aws.amazon.com/ja_jp/location/latest/developerguide/location-regions.html

https://blog.geolonia.com/2021/05/31/amazon-location-service.html

https://blog.geolonia.com/2021/06/07/amazon-location-service-2

https://docs.aws.amazon.com/ja_jp/location/latest/developerguide/samples.html

https://docs.aws.amazon.com/ja_jp/location/latest/developerguide/using-amazon-location.html

https://docs.aws.amazon.com/ja_jp/location/latest/developerguide/how-to-access.html

https://docs.aws.amazon.com/ja_jp/location/latest/developerguide/drawing-on-a-map.html

https://docs.aws.amazon.com/ja_jp/location/latest/developerguide/samples.html#example-draw-markers

https://github.com/aws-geospatial/amazon-location-samples-react/tree/main/map-with-markers

https://github.com/aws-geospatial/amazon-location-samples-react/tree/main/map-with-markers

https://github.com/aws-samples/amazon-location-samples/tree/main/amplify-ui-geo-explore

https://aws.amazon.com/jp/amplify/

https://www.cresco.co.jp/blog/entry/20393.html

https://qiita.com/rubytomato@github/items/5d9b6e184b615f974f28

https://docs.aws.amazon.com/ja_jp/location/latest/developerguide/database-address-validation.html

https://qiita.com/nujust/items/63387a51d3f2379d3433