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

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

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

npm install

npm run build

npm run dev

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

npm install

npm run build

npm run dev

Advance Preparation

• Create an API key for Amazon Location Service

Amazon Location Service #004 - API Key Creation (Maps)

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

maplibregljs-starter

Execution environment

• node v20.6.1
• npm v9.8.1

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

npm install

Start local server

npm run dev

Building a map application

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

Overall Configuration

package.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"
  }
}

.env

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

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

/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.

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,
    })
);

Let's check with a simple local server.

npm run dev

You can display it using a combination of Amazon Location Service API key functionality and MapLibre GL JS!

Related Articles

Building a Map Application with MapLibre GL JS and Svelte

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

#maplibre #svelte #gis #foss4g

Building a Map Application with MapLibre GL JS and Vue.js (script setup)

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

#maplibre #vue #vite #foss4g

Trying to display an Amazon Location Service map in QGIS

Yasunori Kirimoto for AWS Heroes ・ Sep 4 '23

#qgis #amazonlocationservice #foss4g #aws

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

Yasunori Kirimoto for AWS Heroes ・ Aug 2 '23

#amazonlocationservice #itowns #aws #foss4g

Amazon Location Service and AWS Amplify to Use Various Map Library

Yasunori Kirimoto for AWS Heroes ・ Jan 5 '23

#amazonlocationservice #amplify #aws #foss4g

References
MapLibre GL JS
Amazon Location Service