I've published a simple Amazon Location Service starter 🎉
In the previous articles, I've shown how to build an Amazon Location Service application on the assumption that it has a login function and a framework, but I've built a simple starter called "amazon-location-service-starter" that doesn't use these functions.
amazon-location-service-starter
How to use
All you have to do is clone the repository, install and configure AWS Amplify as described in the README, and you are ready to run the application.
npm install -g @aws-amplify/cli
amplify configure
npm install
amplify init
amplify push
If you have already set up AWS Amplify, you only need to do the following to get ready to run your application.
npm install
amplify init
amplify push
Here's a little inside look at the starter.
Setting up the Amazon Location Service
First, let's configure the Amazon Location Service. Internally, I'm using Amplify Geo to build the environment easily.
The authentication function has been added as usual.
amplify add auth
It is okay that the basics of the map function are as usual, but I set the access target to "Authorized and Guest users". By choosing this setting, anyone can view the map without using the login function.
amplify add geo
Front End
Next, let's take a look at the map application part.
Execution environment
- node v16.10.0
- npm v7.24.0
Overall configuration
package.json
{
"name": "amazon-location-service-starter",
"version": "0.1.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack serve --mode=development"
},
"keywords": [],
"author": "Yasunori Kirimoto",
"license": "ISC",
"devDependencies": {
"webpack": "^4.46.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"aws-amplify": "^4.3.10",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"maplibre-gl": "^1.15.2",
"maplibre-gl-js-amplify": "^1.1.2",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1"
}
}
webpack.config.js
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: './_resouce/main.js',
output: {
path: __dirname + '/dist',
filename: 'app.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
},
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
name: './dist/img/icon/[name].[ext]',
},
},
},
],
},
plugins: [
new webpack.ProvidePlugin({
maplibregl: 'maplibre-gl',
maplibregljsamplify: 'maplibre-gl-js-amplify',
}),
],
devServer: {
contentBase: __dirname + '/dist',
publicPath: '/',
watchContentBase: true,
open: true,
},
};
Define MapLibre GL JS and MapLibre GL JS Amplify.
plugins: [
new webpack.ProvidePlugin({
maplibregl: 'maplibre-gl',
maplibregljsamplify: 'maplibre-gl-js-amplify',
}),
],
/_resouce
main.js
import './css/style.css';
import 'maplibre-gl/dist/maplibre-gl.css';
import './js/script.js';
Load MapLibre GL JS.
import 'maplibre-gl/dist/maplibre-gl.css'
/_resouce/css
style.css
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
z-index: 0;
height: 100%;
}
Define the map style.
#map {
z-index: 0;
height: 100%;
}
/_resouce/js
script.js
import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);
async function mapCreate() {
const map = await maplibregljsamplify.createMap({
container: 'map',
center: [139.7648, 35.6794],
zoom: 15,
bearing: 64.8,
pitch: 60,
hash: true,
});
map.addControl(new maplibregl.NavigationControl());
}
mapCreate();
Configure Amplify.
import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);
Configure the map.
async function mapCreate() {
const map = await maplibregljsamplify.createMap({
container: 'map',
center: [139.7648, 35.6794],
zoom: 15,
bearing: 64.8,
pitch: 60,
hash: true,
});
map.addControl(new maplibregl.NavigationControl());
}
mapCreate();
Let's check it out on a simple local server.
npm run dev
If Amplify has been deployed successfully, the map will appear.
I have published a simple Amazon Location Service starter 👍
I've built a simple Amazon Location Service starter that doesn't use the login function and framework. It can be displayed easily, so I hope you will give it a try. Since it does not use the login function, please be careful about billing due to mass access when operating in a public environment 👍
Top comments (0)