
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.
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.
https://x.com/dayjournal_nori/status/1855029985108795676
- node v22.3.0
- npm v10.8.1
1
2
3
VITE_REGION = ap-northeast-1
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_STYLE = Monochrome
1
npm install
1
npm run dev
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"
}
}
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,
})
);
Specify region, resource name, and API key
1
style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${mapApiKey}`
Specify region, fixed style name, and API key
1
style: `https://maps.geo.${region}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${mapApiKey}`