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 の追加が必要になっていた
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（しばらく時間を置くとよい場合がある）
ピンを刺す
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
参考