dayjournal memo

Total 975 articles!!

amazon-location-service

Amazon Location Service #001 - 環境構築

Yasunori Kirimoto's avatar
Yasunori Kirimoto 2022/1/3

画像



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

ビルド

npm run build

開発

npm run dev



book

Q&A