Simple Amazon Location Service Starter

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.

AWS Amplify #003 - Add Authentication Function

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.

AWS Amplify #004 - Add location feature (map)

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 👍

Blog