Adding the map component using the AWS services to an Angular application

Introduction

In this article, an application will be created using the latest version of Angular and added to the MapLibre map library with Amazon Amplify Geo APIs and components using the Amazon Location Service location service.

Prerequisites

Before you start, you need to install and configure the tools below to create the Angular application.

• git: Git is a distributed version control system and it will be used to sync the repository.
• Node.js and npm: Node.js is a JavaScript code runtime software based on Google’s V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries.
• Angular CLI: Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application.
• IDE (e.g. Visual Studio Code or WebStorm): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application.

Getting started

Create and configure the account on the Amazon Location Service

Amazon Location Service provides location functionality to applications without compromising data security and user privacy.

1. Let’s create and configure the account. Access the site https://aws.amazon.com/location/ and click on the button Get Started with Amazon Location Service.

2. Click on the option Root user, fill in the field Root user email address and click on the button Next.

Note:

• If you don’t have an Amazon account, do steps 1 to 9 of the post Authentication using the Amazon Cognito to an Angular application in the session Create and configure the account on the Amazon Cognito.

3. Fill in the field Security check and click on the button Submit.

4. Fill in the field Password and click on the button Sign in.

5. Click on the menu Services.

6. Click on the menu Maps.

7. Click on the link Create map.

8. Fill in the field Name, click on the options Esri Light and To use Amazon Location Maps… and click on the button Create map.

9. Click on the tab Embed map.

10. Click on the link Set up authentication, click on the option Create a new Amazon Cognito unauthenticated Identity pool and click on the link Create new Amazon Cognito Identity pool.

11. Fill in the field Identity pool name, click on the option Enable access to unauthenticated identities and click on the button Create Pool.

12. Click on the link Edit, fill in the field with the JSON below and click on the link Allow.

13. Copy the authentication pool ID displayed and, in my case, the value us-east-1:57a33aaf-0026-44e3-908c-7fb9d5730b9f was displayed because this value will be configured in the Angular application.

14. Ready! Map and authentication pool created.

Create the Angular application

Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 14 and Google is the main maintainer of the project.

Amazon Amplify Geo provides APIs and components for maps using MapLibre and location using Amazon Location Service for JavaScript-based applications.

MapLibre is an open source map library for developers of WEB and mobile applications.

1. Let’s create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.

2. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post Adding the Bootstrap CSS framework to an Angular application.

3. Configure the variable amplify.Auth.identityPoolId with the authentication pool ID, the variables amplify.Auth.region and amplify.geo.AmazonLocationService.region with the region and the variables amplify.geo.AmazonLocationService.maps.items[MAP_NAME] and amplify.geo.AmazonLocationService.maps.default wit the map name created in the Amazon Location Service in the src/environments/environment.ts and src/environments/environment.prod.ts files as below.

4. Install the aws-amplify, maplibre-gl@1, maplibre-gl-js-amplify and @types/mapbox__mapbox-gl-draw libraries.

@types/mapbox__mapbox-gl-draw

5. Configure the maplibre-gl library. Change the angular.json file and add the maplibre-gl.css file as below.

6. Change the src/polyfills.ts file. Add the global declaration as below. This configuration is required starting with Angular version 6.

7. Remove the content of the AppComponent class from the src/app/app.component.ts file. Import the maplibre-gl-js-amplify service and create the getCurrentPosition and loadMap methods as below.

8. Remove the contents of the src/app/app.component.html file. Add the map div tag as below.

9. Add the style in the src/app/app.component.scss file as below.

10. Run the application with the command below.

Note:

• If the error This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag. occurs, add the setting allowSyntheticDefaultImports in the tsconfig.json file as below.

11. Ready! Access the URL http://localhost:4200/ and check if the application is working. See the application working on GitHub Pages and Stackblitz.

The application repository is available at https://github.com/rodrigokamada/angular-aws-map.

Conclusion

Summarizing what was covered in this article:

• We created an account on Amazon Web Services (AWS).
• We created and configured a map on Amazon Location Service
• We create an Angular application.
• We added the map in the Angular application.

You can use this article to create applications that display interactive maps to users.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in portuguese.

To stay updated whenever I post new articles, follow me on Twitter.