DEV Community

Cover image for Simple View of New Map Styles for Amazon Location Service
Yasunori Kirimoto for AWS Community Builders

Posted on • Updated on

Simple View of New Map Styles for Amazon Location Service

Displayed simply the new map styles of Amazon Location Service πŸŽ‰

Recently, two new Amazon Location Service 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. πŸŽ‰
https://github.com/aws-amplify/docs/pull/4287

Advance Preparation

  • Installation of AWS Amplify

AWS Amplify #001 - Installation

β€»Amplify CLI requires v8.4.0 or higher installed.

Execution environment

  • node v18.1.0
  • npm v8.8.0

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

amplify init
Enter fullscreen mode Exit fullscreen mode

img

amplify add auth
Enter fullscreen mode Exit fullscreen mode

img

amplify add geo
Enter fullscreen mode Exit fullscreen mode

img

amplify push
Enter fullscreen mode Exit fullscreen mode

img

This completes the AWS Amplify configuration πŸ‘

Building the Map Application

Next, let's build the actual map application.

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

Overall composition

img

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

Load each library.

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

Map placement settings.

<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
Enter fullscreen mode Exit fullscreen mode

Map view settings.

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

if you check the display, you will see the new map style, "HERE Explore." πŸŽ‰

img

Related Articles

References
Amazon Location Service
AWS Amplify
MapLibre GL JS

Top comments (0)