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
amplify add auth
amplify add geo
amplify push
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
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>
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>
Map placement settings.
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
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>
if you check the display, you will see the new map style, "HERE Explore." π
Related Articles
References
Amazon Location Service
AWS Amplify
MapLibre GL JS
Top comments (0)