Building a Map Application with MapLibre GL JS and Amazon Location Service API key functionality
Tags: maplibre, amazonlocationservice, aws, foss4g
Published: 2023-09-26 11:54:55

![img](https://memo.dayjournal.dev/images/try-103_02.png)

<br>

### I built a development environment with MapLibre GL JS and Amazon Location Service API key function. :tada:  

The created environment is available on GitHub. Please use it! 

{% embed https://github.com/mug-jp/maplibregljs-amazon-location-service-starter %}

<br>

## Advance Preparation

- Create an API key for Amazon Location Service

[Amazon Location Service #004 - API Key Creation (Maps)](https://memo.dayjournal.dev/memo/amazon-location-service-004)

- Use the built environment to get started with MapLibre GL JS easily

[maplibregljs-starter](https://github.com/mug-jp/maplibregljs-starter)


Execution environment

- node v20.6.1
- npm v9.8.1

<br>

## How to use the MapLibre GL JS starter
Use the existing starter to build an Amazon Location Service environment. Fork or download the package to your local environment and verify it works.

Install the package

```sh
npm install
```

Start local server

```sh
npm run dev
```

![img](https://memo.dayjournal.dev/images/try-103_03.png)

<br>

## Building a map application
Finally, we will build the map application. Some files are changed from the starter.

Overall Configuration
![img](https://memo.dayjournal.dev/images/try-103_04.png)

<br>

#### package.json

```json
{
  "name": "maplibregljs-amazon-location-service-starter",
  "version": "3.3.1",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "MapLibre User Group Japan",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.2.2",
    "vite": "^4.4.9"
  },
  "dependencies": {
    "maplibre-gl": "^3.3.1"
  }
}
```

<br>

#### .env
Set the region, API key, and map name created in the preliminaries to the env file.

```env
VITE_REGION = xxxxx
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_NAME = xxxxx
```

<br>

/src
#### main.ts
Read the region, API key, and map name from the env file and set the Style to the URL for the Amazon Location Service.

```typescript
import './style.css'
import 'maplibre-gl/dist/maplibre-gl.css';
import maplibregl from 'maplibre-gl';

const region = import.meta.env.VITE_REGION;
const mapApiKey = import.meta.env.VITE_MAP_API_KEY;
const mapName = import.meta.env.VITE_MAP_NAME;

const map = new maplibregl.Map({
    container: 'map',
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${mapApiKey}`,
    center: [139.767, 35.681],
    zoom: 11,
});

map.addControl(
    new maplibregl.NavigationControl({
        visualizePitch: true,
    })
);
```

<br>

Let's check with a simple local server.

```sh
npm run dev
```

<br>

You can display it using a combination of Amazon Location Service API key functionality and MapLibre GL JS!
![img](https://memo.dayjournal.dev/images/try-103_05.png)  

<br>

Related Articles
{% link https://dev.to/mug-jp/building-a-map-application-with-maplibre-gl-js-and-svelte-pg6 %}
{% link https://dev.to/mug-jp/building-a-map-application-with-maplibre-gl-js-and-vuejs-script-setup-4mim %}
{% link https://dev.to/aws-heroes/trying-to-display-an-amazon-location-service-map-in-qgis-5el3 %}
{% link https://dev.to/aws-heroes/use-3d-map-library-with-api-key-function-of-amazon-location-service-c6a %}
{% link https://dev.to/aws-heroes/amazon-location-service-and-aws-amplify-to-use-various-map-library-4mmk %}

<br>

References
[MapLibre GL JS](https://maplibre.org/)
[Amazon Location Service](https://aws.amazon.com/location)