Select your cookie preferences

We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.

If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”

AWS Logo
Menu
Building a Map Application with Amazon Location Service v2 and MapLibre GL JS

Building a Map Application with Amazon Location Service v2 and MapLibre GL JS

This is an example of using the new map styles in Amazon Location Service v2, released in November 2024.

awslocation-serviceamazon-location-servicemaplibrefoss4g
Yasunori Kirimoto
Published Nov 18, 2024
Comments
In November 2024, Amazon Location Service v2 was finally released!
I was offered by the service team and participated in the verification work before the release. In the new version, several new features have been added, greatly improving the convenience of use. In particular, it is worth noting that the API is now available at a unified endpoint without creating resources.
This change means that users no longer need to prepare individual resources and can start using the API immediately. In addition, the Maps API, Places API, and Routes API have been significantly enhanced, and new features have been added, making them even more useful for a wider range of applications. Furthermore, they continue to be compatible with open source map libraries, and in particular, they work smoothly in combination with MapLibre GL JS.
This article will introduce how to use the new map styles(GetStyleDescriptor) in the Maps API. With Amazon Location Service v2, the old map styles have been discontinued, and new map styles unique to AWS have been adopted.
Image not found
The thread I posted on X also summarizes the recommended points of v2. 🗺️
https://x.com/dayjournal_nori/status/1855029985108795676
I have built a starter that supports Amazon Location Service v2. The created environment is available on GitHub. Please use it.
https://github.com/mug-jp/maplibregljs-amazon-location-service-starter

Advance Preparation

Create an API key for Amazon Location Service v2

Amazon Location Service #007 - API Key Creation (v2)

Execution environment

  • node v22.3.0
  • npm v10.8.1

How to use the starter

Fork or download the Amazon Location Service v2 starter to your local environment and run it. In the env file, set the region name, the API key you created in advance, and the fixed map style name. As of November 2024, four map styles are available: Standard, Monochrome, Hybrid, and Satellite.

.env

1
2
3
VITE_REGION = ap-northeast-1
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_STYLE = Monochrome

Install the package

1
npm install

Start the local server

1
npm run dev
Image not found

Starter Contents

Here, we will introduce the contents of the starter.
Image not found

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"name": "maplibregljs-amazon-location-service-starter",
"version": "4.7.1",
"description": "",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"keywords": [],
"author": "MapLibre User Group Japan",
"license": "ISC",
"devDependencies": {
"typescript": "^5.6.3",
"vite": "^5.4.10"
},
"dependencies": {
"maplibre-gl": "^4.7.1"
}
}

main.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 mapStyle = import.meta.env.VITE_MAP_STYLE;

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

map.addControl(
new maplibregl.NavigationControl({
visualizePitch: true,
})
);
Amazon Location Service has been updated to v2, and the method for specifying style URLs and parameters has changed.
Version that requires the previous resources
Specify region, resource name, and API key
1
style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${mapApiKey}`
Version that does not require the latest resources (v2)
Specify region, fixed style name, and API key
1
style: `https://maps.geo.${region}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${mapApiKey}`
References
Amazon Location Service
MapLibre GL JS
 
Comments

Comments

Log in to comment