Simple View of New Map Styles for Amazon Location Service
Tags: amazonlocationservice, amplifygeo, amplify, maplibre
Published: 2022-04-04 11:53:53


### Displayed simply the new map styles of Amazon Location Service :tada:  

Recently, two new [Amazon Location Service](https://aws.amazon.com/location) map styles have been available: "HERE Explore," a sophisticated design map style, and "HERE Explore Truck," added truck restrictions and attributes. The "HERE Explore" style is the first style in the Amazon Location Service that also applies Japanese localization. This time, we display the "HERE Explore" simply!

~~As of April 2022, the new map style has been added to Amazon Location Service, but the feature has not yet been added to AWS Amplify. This is tentative support until the part is added.~~

The Amplify CLI and Amplify Docs pull requests I submitted recently have been merged, and the new map style is finally available in AWS Amplify. :tada:
https://github.com/aws-amplify/docs/pull/4287

<br>

Advance Preparation

- Installation of AWS Amplify

[AWS Amplify #001 - Installation](https://day-journal.com/memo/aws-amplify-001)

※Amplify CLI requires v8.4.0 or higher installed.

<br>

Execution environment

- node v18.1.0
- npm v8.8.0 

<br>

## Setting up AWS Amplify
First, we will configure AWS Amplify. 

Add authentication functions as usual. For the map function,　"HERE Explore" and set the access target to "Authorized and Guest users."

<br>

```sh
amplify init
```

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

<br>

```sh
amplify add auth
```

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

<br>

```sh
amplify add geo
```

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

<br>

```sh
amplify push
```

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

<br>

This completes the AWS Amplify configuration :thumbsup: 

<br>

## Building the Map Application
Next, let's build the actual map application. 

This time, we built the most straightforward configuration, "index.html" only.  

<br>

Overall composition

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

#### index.html

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Display a map on a webpage</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>
        <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <style>
            body { margin: 0; padding: 0; }
            #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="module">
            import awsconfig from "./aws-exports.js";
            const { Amplify } = aws_amplify_core;
            const { createMap } = AmplifyMapLibre;
            Amplify.configure(awsconfig);
            createMap({
                container: "map",
                center: [139.7648, 35.6794],
                zoom: 15,
                bearing: 64.8,
                pitch: 60,
            });
        </script>
    </body>
</html>
```

<br>

Load each library.

```html
<link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>
<script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

<br>

Map placement settings.

```html
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
```

<br>

Map view settings.

```html
<div id="map"></div>
<script type="module">
    import awsconfig from "./aws-exports.js";
    const { Amplify } = aws_amplify_core;
    const { createMap } = AmplifyMapLibre;
    Amplify.configure(awsconfig);
    createMap({
        container: "map",
        center: [139.7648, 35.6794],
        zoom: 15,
        bearing: 64.8,
        pitch: 60,
    });
</script>
```

<br>

if you check the display, you will see the new map style, "HERE Explore." :tada:  
![img](https://day-journal.com/memo/images/try-086_10.png)   

<br>

Related Articles
{% link https://dev.to/aws-builders/a-summary-of-how-to-build-amplify-geo-and-amazon-location-service-5hal %}

<br>

References
[Amazon Location Service](https://aws.amazon.com/location/)
[AWS Amplify](https://aws-amplify.github.io/docs/)
[MapLibre GL JS](https://www.maplibre.org)