2023/11時点で"Amplify Geo で React アプリに地図を表示してみよう"記事を試した際に色々とアップデートが必要な点があったので備忘メモを兼ねて記載

2023/11時点で"Amplify Geo で React アプリに地図を表示してみよう"記事を試した際に色々とアップデートが必要な点があったので備忘メモを兼ねて記載

## 参考記事

> https://aws.amazon.com/jp/builders-flash/202111/amplify-geo-map/?awsf.filter-name=*all
> Amplify Geo で React アプリに地図を表示してみよう
〜AWS Amplify と Amazon Location Service のご紹介も添えて

`Amazon Location Service`については以下を参照

> https://aws.amazon.com/jp/location/
> アプリケーションに位置情報データをセキュアかつ簡単に追加

## Amplify CLIのインストール

> ```
> npm i -g @aws-amplify/cli
> ```

※バージョンが(12.3.x)より昔だと以下のような事になる（なった）ので注意

https://qiita.com/seigot/items/3741a2f9a5b1b9cb3170

## Amplify CLI の初期設定

> Amplify CLIを利用するのが初めての方は、ここで以下のコマンドを実行して、Amplify CLI の初期設定 を実行してください。

基本的にデフォルト＋それなりに権限のあるユーザのaccessID/secretaccessKeyを入力すればOKのはず

> ```
> amplify configure
> ```

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

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

## プロジェクトの初期設定

元記事に記載間違いがありそうなので、ここで代わりに`amplify init`を実行する

> ```
> amplify init
> ```

## 地図リソースの追加

> ```
> amplify add geo
> ```

## 先ほど設定した内容をバックエンド (AWS 上) に適用 (push) します

ここでamplifyの設定をバックエンド側に反映させる事で、Amplify Geo経由でAWS Location serviceへアクセスできるようになっているはず

> ```
> amplify push
> ```

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

> ```
> # Amplify Libraries をインストール
> npm install aws-amplify
> ``` 

> ``` 
> # 地図を表示させるためのライブラリをインストール
> npm install maplibre-gl@1 maplibre-gl-js-amplify
> ```

## App.jsを更新

`src/App.js`を更新する、以下をコピーすればOK
`{ Amplify }`の追加と、`import React` の追加が必要になっていた

```App.js
import React, { useEffect } from 'react';
import { createMap } from "maplibre-gl-js-amplify";
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import "maplibre-gl/dist/maplibre-gl.css";

// Amplify の設定を読み込み
Amplify.configure(awsconfig);

function App() {
  useEffect(() => {
    createMap({
      container: "map", // An HTML Element or HTML element ID to render the map in https://maplibre.org/maplibre-gl-js-docs/api/map/
      center: [139.7674681227469, 35.68111419325676], // 東京駅
      zoom: 14,
  })
  }, []);
  return (
    <div id="map" style={{height: '100vh'}}/>
  );
}

export default App;
```

## 地図のプレビュー

以下を実行

> ```
> npm start
> ```

以下により、cloud9上のプレビュー画面から地図の表示を確認できた

> Cloud9 で実行されている場合は「Preview」から「Preview Running Application」

## （参考）cloud frontへデプロイする場合は以下で良いはず

```sh
$ amplify add hosting
> Amazon CloudFront and S3

$ amplify publish
> Are you sure to continue (Y/n) yes
```

`Hosting endpoint: https://xxxxxxx.cloudfront.net`のようなテキストが返るので、ブラウザからアクセスすればOK（しばらく時間を置くとよい場合がある）

## ピンを刺す

```App.js
import React, { useEffect } from 'react';
import { createMap, drawPoints } from "maplibre-gl-js-amplify";
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import "maplibre-gl/dist/maplibre-gl.css";

// Amplify の設定を読み込み
Amplify.configure(awsconfig);

function App() {
    useEffect(() => {
        async function initMap() {
        const map = await createMap({
            container: "map", // An HTML Element or HTML element ID to render the map in https://maplibre.org/maplibre-gl-js-docs/api/map/
            center: [139.7674681227469, 35.68111419325676], // 東京駅
            zoom: 14,
        });
        map.on("load", function () {
            drawPoints('pointsSource',
                       [
                           {
                               coordinates: [139.7646, 35.6827],
                               title: 'Point01',
                               address: 'Main Points',
                           },
                       ],
                       map,
                       {
                           showCluster: true,
                           unclusteredOptions: {
                               showMarkerPopup: true,
                               defaultColor: '#005773'
                           },
                           clusterOptions: {
                               showCount: true,
                               fillColor: '#005773'
                           },
                       }
                      );
        });
        }
        initMap();
    }, []);
    return (
            <div id="map" style={{height: '100vh'}}/>
    );
}

export default App;
```

#### 備考

cloud9でemacsをインストール

```
sudo yum install emacs -y
```

# 参考

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

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

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