Simple Amazon Location Service Starter
Tags: amazonlocationservice, awsamplify, maplibre, webpack
Published: 2021-12-15 11:07:17

![img](https://day-journal.com/memo/images/try-073_01.png)
<br>

### I've published a simple Amazon Location Service starter :tada:  

In the previous [articles](https://dev.to/aws-builders/a-summary-of-how-to-build-amplify-geo-and-amazon-location-service-5hal), I've shown how to build an [Amazon Location Service](https://aws.amazon.com/jp/location) 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](https://github.com/dayjournal/amazon-location-service-starter)" that doesn't use these functions. 

<br>

### [amazon-location-service-starter](https://github.com/dayjournal/amazon-location-service-starter)

<br>

## 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.

```sh
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.

```sh
npm install
amplify init
amplify push
```

<br>

Here's a little inside look at the starter.

<br>

## 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.

<br>

The authentication function has been added as usual.

- [AWS Amplify #003 - Add Authentication Function](https://day-journal.com/memo/aws-amplify-003)

```sh
amplify add auth
```

<br>

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.

- [AWS Amplify #004 - Add location feature (map)](https://day-journal.com/memo/aws-amplify-004)

```sh
amplify add geo
```

![img](https://day-journal.com/memo/images/try-073_03.png)  

<br>

## Front End
Next, let's take a look at the map application part.  

<br>

Execution environment
- node v16.10.0  
- npm v7.24.0  

<br>

Overall configuration

![img](https://day-journal.com/memo/images/try-073_02.png)  

<br>

#### package.json

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

<br>

#### webpack.config.js

```javascript
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,
    },
};
```

<br>

Define MapLibre GL JS and MapLibre GL JS Amplify.

```javascript
plugins: [
    new webpack.ProvidePlugin({
        maplibregl: 'maplibre-gl',
        maplibregljsamplify: 'maplibre-gl-js-amplify',
    }),
],
```

<br>

/_resouce

#### main.js

```javascript
import './css/style.css';
import 'maplibre-gl/dist/maplibre-gl.css';

import './js/script.js';
```

<br>

Load MapLibre GL JS.

```javascript
import 'maplibre-gl/dist/maplibre-gl.css'
```

<br>

/_resouce/css

#### style.css

```css
html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}
```

<br>

Define the map style.

```css
#map {
    z-index: 0;
    height: 100%;
}
```

<br>

/_resouce/js

#### script.js

```javascript
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();
```

<br>

Configure Amplify.

```javascript
import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);
```

<br>

Configure the map.

```javascript
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();
```

<br>

Let's check it out on a simple local server.

```sh
npm run dev
```

<br>

If Amplify has been deployed successfully, the map will appear.

![img](https://day-journal.com/memo/images/try-073_00.gif)  

#### I have published a simple Amazon Location Service starter :thumbsup: 

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 :thumbsup: