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

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

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

<br>

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

事前準備

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

実行環境

- node v18.1.0  
- npm v8.8.0  

<br>

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

- [環境構築](https://qiita.com/dayjournal/items/c89a34a674ea4a42474a#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89)
- [AWS Amplifyの設定](https://qiita.com/dayjournal/items/c89a34a674ea4a42474a#aws-amplify%E3%81%AE%E8%A8%AD%E5%AE%9A)
- [マップアプリケーションの構築](https://qiita.com/dayjournal/items/c89a34a674ea4a42474a#%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>

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

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

```sh
npm install aws-amplify
npm install maplibre-gl-js-amplify
npm install @geoblocks/ol-maplibre-layer
```

#### package.json

```json
{
  "name": "openlayers-starter",
  "version": "6.15.1",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "Yasunori Kirimoto",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.7.4",
    "vite": "^3.0.4"
  },
  "dependencies": {
    "@geoblocks/ol-maplibre-layer": "^0.0.4",
    "aws-amplify": "^4.3.30",
    "maplibre-gl-js-amplify": "^2.0.3",
    "ol": "^6.15.1"
  }
}
```

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

<br>

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

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

```sh
amplify init
```

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

```sh
amplify add auth
```

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

```sh
amplify add geo
```

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

```sh
amplify push
```

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

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

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

<br>

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

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

<br>

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

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

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

<br>

/src
#### @geoblocks/ol-maplibre-layer.d.ts
MapLibre OpenLayers layerの型定義ファイルを追加します。

```typescript
declare module '@geoblocks/ol-maplibre-layer';
```

<br>

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

```typescript
import './style.css'
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import Source from 'ol/source/Source';
import { fromLonLat } from 'ol/proj';
import { ScaleLine } from 'ol/control';
import MapLibreLayer from '@geoblocks/ol-maplibre-layer';
import { Amplify } from 'aws-amplify';
import { Auth } from 'aws-amplify';
import { Geo, AmazonLocationServiceMapStyle } from '@aws-amplify/geo';
import awsconfig from './aws-exports';
import { AmplifyMapLibreRequest } from 'maplibre-gl-js-amplify';

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

const map = new Map({
    target: 'map',
    layers: [
        new MapLibreLayer({
            maplibreOptions: {
                style: Geo.getDefaultMap().mapName,
                transformRequest: transformRequest,
            },
            source: new Source({
                attributions: [
                    '© 2022 HERE',
                ],
                attributionsCollapsible: false,
            }),
        }),
    ],
    view: new View({
        center: fromLonLat([139.767, 35.681]),
        zoom: 11,
    }),
});

map.addControl(new ScaleLine({
    units: 'metric'
}));
```

<br>

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

<br>
<br>

Amazon Location ServiceとAWS AmplifyとOpenLayersについて、他にも記事を書いています。よろしければぜひ :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/OpenLayers" target="_blank">tags - OpenLayers</a>

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

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>