DEV Community

Cover image for Simple Amazon Location Service Starter
Yasunori Kirimoto for AWS Community Builders

Posted on

Simple Amazon Location Service Starter

img

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

img

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

img

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"
    }
}
Enter fullscreen mode Exit fullscreen mode

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,
    },
};
Enter fullscreen mode Exit fullscreen mode

Define MapLibre GL JS and MapLibre GL JS Amplify.

plugins: [
    new webpack.ProvidePlugin({
        maplibregl: 'maplibre-gl',
        maplibregljsamplify: 'maplibre-gl-js-amplify',
    }),
],
Enter fullscreen mode Exit fullscreen mode

/_resouce

main.js

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

import './js/script.js';
Enter fullscreen mode Exit fullscreen mode

Load MapLibre GL JS.

import 'maplibre-gl/dist/maplibre-gl.css'
Enter fullscreen mode Exit fullscreen mode

/_resouce/css

style.css

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

#map {
    z-index: 0;
    height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Define the map style.

#map {
    z-index: 0;
    height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

/_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();
Enter fullscreen mode Exit fullscreen mode

Configure Amplify.

import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

img

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 👍

Discussion (0)