あらすじ
- 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 geoAPI経由で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
参考