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)より昔だと以下のような事になる（なった）ので注意

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へデプロイする場合は以下で良いはず

$ 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

参考