DEV Community

Cover image for Building a Map Application with MapLibre GL JS and Amazon Location Service API key functionality
Yasunori Kirimoto for AWS Heroes

Posted on

Building a Map Application with MapLibre GL JS and Amazon Location Service API key functionality

img

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!

GitHub logo mug-jp / maplibregljs-amazon-location-service-starter

Start MapLibre GL JS and Amazon Location Service easily. [MapLibre GL JS, Amazon Location Service, Vite]

maplibregljs-amazon-location-service-starter

README02

Start MapLibre GL JS and Amazon Location Service easily.


blog

Building a Map Application with MapLibre GL JS and Amazon Location Service API key functionality


Usage

README03


Create Amazon Location Service "map" and "API key"

API key creation (map)


Set "region", "API key" and "map name" in env file

VITE_REGION = xxxxx
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_NAME = xxxxx
Enter fullscreen mode Exit fullscreen mode

Install package

npm install
Enter fullscreen mode Exit fullscreen mode

build

npm run build
Enter fullscreen mode Exit fullscreen mode

dev

npm run dev
Enter fullscreen mode Exit fullscreen mode



README01


License

MIT

Copyright (c) 2023-2024 MapLibre User Group Japan




Japanese


MapLibreGLJS & Amazon Location Service スターター

README02

MapLibre GL JSとAmazon Location Serviceを手軽に始める


blog

MapLibre GL JSとAmazon Location ServiceのAPIキー機能で開発環境を構築してみた


使用方法

README03


Amazon Location Serviceのマップ・APIキーを作成

APIキー作成(マップ)


リージョン・APIキー・マップ名をenvファイルに設定

VITE_REGION = xxxxx
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_NAME = xxxxx
Enter fullscreen mode Exit fullscreen mode

パッケージインストール

npm install
Enter fullscreen mode Exit fullscreen mode

ビルド

npm run build
Enter fullscreen mode Exit fullscreen mode

開発

npm run dev
Enter fullscreen mode Exit fullscreen mode


README01


ライセンス

MIT

Copyright (c) 2023-2024…

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


Enter fullscreen mode Exit fullscreen mode

Start local server



npm run dev


Enter fullscreen mode Exit fullscreen mode

img

Building a map application

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

Overall Configuration
img

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


Enter fullscreen mode Exit fullscreen mode

.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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Let's check with a simple local server.



npm run dev


Enter fullscreen mode Exit fullscreen mode

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

Related Articles

References
MapLibre GL JS
Amazon Location Service

Top comments (0)