Amazon Location Serviceの環境構築をするメモ。
GitHubでも公開しています。Amazon Location Serviceでのビルド環境を手軽に始めたい方ぜひご利用ください。
amazon-location-service-starter
全体構成
package.json
{
"name": "amazon-location-service-starter",
"version": "2.0.4",
"description": "",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"keywords": [],
"author": "Yasunori Kirimoto",
"license": "ISC",
"devDependencies": {
"typescript": "^4.7.4",
"vite": "^3.0.4"
},
"dependencies": {
"aws-amplify": "^4.3.30",
"maplibre-gl": "^2.4.0",
"maplibre-gl-js-amplify": "^2.0.4"
}
}
|
vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser',
},
},
define: {
'window.global': {}
},
})
|
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Amazon Location Service Starter</title>
</head>
<body>
<div id="map"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
|
./src
main.ts
import './style.css'
import 'maplibre-gl/dist/maplibre-gl.css';
import maplibregl from 'maplibre-gl';
import { createMap } from "maplibre-gl-js-amplify";
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
async function mapCreate() {
const map = await createMap({
container: 'map',
center: [139.767, 35.681],
zoom: 11,
});
map.addControl(
new maplibregl.NavigationControl({
visualizePitch: true,
})
);
}
mapCreate();
|
./src
style.css
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
z-index: 0;
height: 100%;
}
|
利用方法
AWS Amplifyのインストールと設定で準備が完了。
npm install -g @aws-amplify/cli
amplify configure
npm install
amplify init
amplify push
|
AWS Amplifyを設定済の場合は下記のみ実行。
npm install
amplify init
amplify push
|
ビルド
開発
