Yasunori Kirimoto for AWS Heroes

Posted on Nov 18

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

#aws #amazonlocationservice #maplibre #foss4g

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.

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

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

Install the package

npm install

Start the local server

npm run dev

Starter Contents

Here, we will introduce the contents of the starter.

package.json

{
  "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

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

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

style: `https://maps.geo.${region}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${mapApiKey}`

Building an Amazon Location Service Resources with AWS CDK and AWS CloudFormation

Yasunori Kirimoto for AWS Heroes ・ Apr 2

#cdk #cloudformation #amazonlocationservice #maplibre

Trying to display an Amazon Location Service map in QGIS

Yasunori Kirimoto for AWS Heroes ・ Sep 4 '23

#qgis #amazonlocationservice #foss4g #aws

Building a Map Application with MapLibre GL JS and Svelte

Yasunori Kirimoto for MapLibre User Group Japan ・ Sep 21 '23

#maplibre #svelte #gis #foss4g

Use 3D map library with API key function of Amazon Location Service

Yasunori Kirimoto for AWS Heroes ・ Aug 2 '23

#amazonlocationservice #itowns #aws #foss4g

DEV Community