Amazon Location ServiceとLeafletとAWS Amplifyを組み合わせてマップアプリケーションを構築してみた

![img](https://day-journal.com/memo/images/try-095_01.gif)

![img](https://day-journal.com/memo/images/try-095_02.png)

<br>

### Amazon Location ServiceとLeafletとAWS Amplifyを組み合わせてマップアプリケーションを構築してみました :tada:  
<br>

事前準備

- AWS Amplifyのインストール  
[AWS Amplify #001 - インストール](https://day-journal.com/memo/aws-amplify-001)
- Leafletを手軽に始めるビルド環境を利用  
[leaflet-starter](https://github.com/dayjournal/leaflet-starter)

実行環境

- node v18.1.0  
- npm v8.8.0  

<br>

詳細として下記について説明します。

- [環境構築](https://qiita.com/dayjournal/items/4aa612c4b5ce1b204bdc#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89)
- [マップアプリケーションの構築](https://qiita.com/dayjournal/items/4aa612c4b5ce1b204bdc#%E3%83%9E%E3%83%83%E3%83%97%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%A7%8B%E7%AF%89)

<br>

## 環境構築
はじめに、環境構築をします。  

環境は[leaflet-starter](https://github.com/dayjournal/leaflet-starter)を利用し、事前にAWS Amplify PackageとMaplibre GL JS Amplifyのパッケージをインストールします。また、ベクトルタイルを表示するためにMapLibre GL JSとMapLibre GL Leafletのパッケージもインストールします。

```sh
npm install aws-amplify
npm install maplibre-gl-js-amplify@1.6.0
npm install maplibre-gl@1.15.3
npm install @maplibre/maplibre-gl-leaflet
```

#### package.json

```json
{
  "name": "leaflet-starter",
  "version": "1.9.2",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "Yasunori Kirimoto",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.8.4",
    "vite": "^3.1.8"
  },
  "dependencies": {
    "@maplibre/maplibre-gl-leaflet": "^0.0.17",
    "@types/leaflet": "^1.8.0",
    "aws-amplify": "^4.3.38",
    "leaflet": "^1.9.2",
    "maplibre-gl": "^1.15.3",
    "maplibre-gl-js-amplify": "^1.6.0"
  }
}
```

これで環境構築は完了になります！

<br>

## AWS Amplifyの設定
次に、AWS Amplifyの設定をします。  

認証機能は通常通り追加します。マップ機能は「HERE Explore」を選択し、アクセス対象は「Authorized and Guest users」に設定しました。  

```sh
amplify init
```

![img](https://day-journal.com/memo/images/try-095_05.png)

```sh
amplify add auth
```

![img](https://day-journal.com/memo/images/try-095_06.png)

```sh
amplify add geo
```

![img](https://day-journal.com/memo/images/try-095_07.png)

```sh
amplify push
```

![img](https://day-journal.com/memo/images/try-095_08.png)

AWSマネジメントコンソールでもデプロイ後の確認ができます。
![img](https://day-journal.com/memo/images/try-095_09.png)

これでAWS Amplifyの設定は完了になります！

<br>

## マップアプリケーションの構築
最後に、実際にマップアプリケーションを構築します。  

全体構成
![img](https://day-journal.com/memo/images/try-095_04.png)

<br>

#### vite.config.ts
AWS AmplifyとLeafletの組み合わせをViteで実行可能にする設定をします。

```typescript
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  define: {
    'window.global': {}
  },
  build: {
    target: 'esnext',
    commonjsOptions: {
      ignoreDynamicRequires: true
    }
  }
})
```

<br>

/src
#### main.ts
LeafletでAmazon Location Serviceのマップスタイルを表示する設定をします。

```typescript
import './style.css';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import '@maplibre/maplibre-gl-leaflet';
import { Amplify } from '@aws-amplify/core';
import { Auth } from '@aws-amplify/auth';
import { Geo, AmazonLocationServiceMapStyle } from '@aws-amplify/geo';
import awsconfig from './aws-exports';
import { AmplifyMapLibreRequest } from 'maplibre-gl-js-amplify';
L.Icon.Default.imagePath = 'img/icon/';

Amplify.configure(awsconfig);
const credentials = await Auth.currentCredentials();
const defaultMap = Geo.getDefaultMap() as AmazonLocationServiceMapStyle;
const { transformRequest } = new AmplifyMapLibreRequest(
    credentials,
    defaultMap.region
);

const map = L.map('map', {
    center: [35.681, 139.767],
    zoom: 11,
    layers: [
        L.maplibreGL({
            style: Geo.getDefaultMap().mapName,
            transformRequest: transformRequest,
        })
    ],
});
map.attributionControl.addAttribution(
    '© 2022 HERE'
);
```

<br>

LeafletでAmazon Location Serviceのマップスタイルを表示できました！
![img](https://day-journal.com/memo/images/try-095_10.png)  

<br>
<br>

Amazon Location ServiceとAWS AmplifyとLeafletについて、他にも記事を書いています。よろしければぜひ :bow:
<a href="https://day-journal.com/memo/tags/Amazon-Location-Service" target="_blank">tags - Amazon Location Service</a>
<a href="https://day-journal.com/memo/tags/AWS-Amplify" target="_blank">tags - AWS Amplify</a>
<a href="https://day-journal.com/memo/tags/Leaflet" target="_blank">tags - Leaflet</a>

やってみたシリーズ :grinning:
<a href="https://day-journal.com/memo/tags/Try" target="_blank">tags - Try</a>

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

https://qiita.com/dayjournal/items/3c6637779133bce44fdb

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

https://qiita.com/dayjournal/items/5bbcec6ed51367598069

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

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://day-journal.com/memo/images/etc/book.png" alt="book"></a>