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!
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
Start MapLibre GL JS and Amazon Location Service easily.
- MapLibre GL JS v3.3.1
- Amazon Location Service
- node v20.6.1
- npm v9.8.1
Usage
Create Amazon Location Service "map" and "API key"
Set "region", "API key" and "map name" in env file
VITE_REGION = xxxxx
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_NAME = xxxxx
Install package
npm install
build
npm run build
dev
npm run dev
License
MIT
Copyright (c) 2023 MapLibre User Group Japan
Japanese
MapLibreGLJS & Amazon Location Service スターター
MapLibre GL JSとAmazon Location Serviceを手軽に始める
- MapLibre GL JS v3.3.1
- Amazon Location Service
- node v20.6.1
- npm v9.8.1
使用方法
Amazon Location Serviceのマップ・APIキーを作成
リージョン・APIキー・マップ名をenvファイルに設定
VITE_REGION = xxxxx
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_NAME = xxxxx
パッケージインストール
npm install
ビルド
npm run build
開発
npm run dev
ライセンス
MIT
Copyright (c) 2023 MapLibre User Group Japan
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
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
References
MapLibre GL JS
Amazon Location Service
Top comments (0)