Building a Map Application with Amazon Location Service, OpenLayers, and AWS Amplify
Tags: amazonlocationservice, openlayers, amplify, aws
Published: 2022-08-15 11:26:22

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

<br>

### I built a map application using Amazon Location Service, OpenLayers, and AWS Amplify :tada:  
<br>

Advance Preparation
- Installation of AWS Amplify
[AWS Amplify #001 - Installation](https://day-journal.com/memo/aws-amplify-001)

- Use the built environment to get started with OpenLayers easily
[openlayers-starter](https://github.com/dayjournal/openlayers-starter)

Execution environment
- node v18.1.0  
- npm v8.8.0  

<br>

The following is a detailed explanation.
- Building the Environment
- Setting up AWS Amplify
- Building the Map Application

<br>

## Building the Environment
First, we will build the environment.

The environment uses "[openlayers-starter](https://github.com/dayjournal/openlayers-starter)" and installs the “AWS Amplify” Package and "Maplibre GL JS Amplify" packages in advance. Also, install "MapLibre OpenLayers layer" package to display vector tiles.

```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"
  }
}
```

This completes the environment build!

<br>

## Setting up AWS Amplify
Next, we will configure AWS Amplify.

Add authentication functions as usual. For the map function, select "HERE Explore" and set the access target to "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)

You can also check the deployment status in the AWS Management Console.
![img](https://day-journal.com/memo/images/try-093_09.png)

This completes the AWS Amplify configuration!

<br>

## Building the Map Application
Finally, let's build the actual map application.

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

<br>

#### vite.config.ts
Configure the combination of AWS Amplify and OpenLayers to be executable in 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
Add the MapLibre OpenLayers layer type definition file.

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

<br>

/src
#### main.ts
Configure OpenLayers to display Amazon Location Service map styles.

```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>

Now we can display the Amazon Location Service map style in OpenLayers!
![img](https://day-journal.com/memo/images/try-093_10.png)  

<br>

Related Articles
{% link https://dev.to/aws-builders/a-summary-of-how-to-build-amplify-geo-and-amazon-location-service-5hal %}
{% link https://dev.to/aws-builders/simple-view-of-new-map-styles-for-amazon-location-service-68n %}
{% link https://dev.to/aws-builders/building-a-map-application-with-amazon-location-service-leaflet-aws-amplify-and-vuejs-2l6e %}
{% link https://dev.to/aws-builders/building-a-map-application-with-amazon-location-service-maplibre-gl-js-aws-amplify-and-vuejs-2m48 %}

<br>

References
[Amazon Location Service](https://aws.amazon.com/location/)
[AWS Amplify](https://aws-amplify.github.io/docs/)
[OpenLayers](https://openlayers.org)