Introduction In this article, an application will be created using the latest version of and added to the map library with APIs and components using the location service. Angular MapLibre Amazon Amplify Geo Amazon Location Service Prerequisites Before you start, you need to install and configure the tools below to create the Angular application. : Git is a distributed version control system and it will be used to sync the repository. git : 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. Node.js and npm : Angular CLI is a command-line utility tool for Angular and it will be used to create the base structure of the Angular application. Angular CLI IDE (e.g. or ): 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. Visual Studio Code WebStorm Getting started Create and configure the account on the Amazon Location Service provides location functionality to applications without compromising data security and user privacy. Amazon Location Service Let's create and configure the account. Access the site and click on the button . 1. https://aws.amazon.com/location/ Get Started with Amazon Location Service Click on the option , fill in the field and click on the button . 2. Root user Root user email address Next Note: If you don't have an Amazon account, do steps 1 to 9 of the post in the session . Authentication using the Amazon Cognito to an Angular application Create and configure the account on the Amazon Cognito Fill in the field and click on the button . 3. Security check Submit Fill in the field and click on the button . 4. Password Sign in Click on the menu . 5. Services Click on the menu . 6. Maps Click on the link . 7. Create map Fill in the field , click on the options and and click on the button . 8. Name Esri Light To use Amazon Location Maps... Create map Click on the tab . 9. Embed map Click on the link , click on the option and click on the link . 10. Set up authentication Create a new Amazon Cognito unauthenticated Identity pool Create new Amazon Cognito Identity pool Fill in the field , click on the option and click on the button . 11. Identity pool name Enable access to unauthenticated identities Create Pool Click on the link , fill in the field with the below and click on the link . 12. Edit JSON Allow {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "mobileanalytics:PutEvents",
        "cognito-sync:*",
        "geo:GetMap*"
      ],
      "Resource": [
        "*"
      ],
      "Condition": {
        "StringLike": {
          "aws:referer": [
            "*"
          ]
        }
      }
    }
  ]
} Copy the authentication pool ID displayed and, in my case, the value was displayed because this value will be configured in the Angular application. 13. us-east-1:57a33aaf-0026-44e3-908c-7fb9d5730b9f Ready! Map and authentication pool created. 14. Create the Angular application 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. Angular provides APIs and components for maps using MapLibre and location using Amazon Location Service for JavaScript-based applications. Amazon Amplify Geo is an open source map library for developers of WEB and mobile applications. MapLibre Let's create the application with the Angular base structure using the with the route file and the SCSS style format. 1. @angular/cli ng new angular-aws-map --routing true --style scss
CREATE angular-aws-map/README.md (1077 bytes)
CREATE angular-aws-map/.editorconfig (274 bytes)
CREATE angular-aws-map/.gitignore (548 bytes)
CREATE angular-aws-map/angular.json (3327 bytes)
CREATE angular-aws-map/package.json (1089 bytes)
CREATE angular-aws-map/tsconfig.json (863 bytes)
CREATE angular-aws-map/.browserslistrc (600 bytes)
CREATE angular-aws-map/karma.conf.js (1443 bytes)
CREATE angular-aws-map/tsconfig.app.json (287 bytes)
CREATE angular-aws-map/tsconfig.spec.json (333 bytes)
CREATE angular-aws-map/.vscode/extensions.json (130 bytes)
CREATE angular-aws-map/.vscode/launch.json (474 bytes)
CREATE angular-aws-map/.vscode/tasks.json (938 bytes)
CREATE angular-aws-map/src/favicon.ico (948 bytes)
CREATE angular-aws-map/src/index.html (309 bytes)
CREATE angular-aws-map/src/main.ts (372 bytes)
CREATE angular-aws-map/src/polyfills.ts (2338 bytes)
CREATE angular-aws-map/src/styles.scss (80 bytes)
CREATE angular-aws-map/src/test.ts (745 bytes)
CREATE angular-aws-map/src/assets/.gitkeep (0 bytes)
CREATE angular-aws-map/src/environments/environment.prod.ts (51 bytes)
CREATE angular-aws-map/src/environments/environment.ts (658 bytes)
CREATE angular-aws-map/src/app/app-routing.module.ts (245 bytes)
CREATE angular-aws-map/src/app/app.module.ts (393 bytes)
CREATE angular-aws-map/src/app/app.component.scss (0 bytes)
CREATE angular-aws-map/src/app/app.component.html (23364 bytes)
CREATE angular-aws-map/src/app/app.component.spec.ts (1133 bytes)
CREATE angular-aws-map/src/app/app.component.ts (231 bytes)
✔ Packages installed successfully.
    Successfully initialized git. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post . 2. Adding the Bootstrap CSS framework to an Angular application Configure the variable with the authentication pool ID, the variables and with the region and the variables and wit the map name created in the Amazon Location Service in the and files as below. 3. amplify.Auth.identityPoolId amplify.Auth.region amplify.geo.AmazonLocationService.region amplify.geo.AmazonLocationService.maps.items[MAP_NAME] amplify.geo.AmazonLocationService.maps.default src/environments/environment.ts src/environments/environment.prod.ts amplify: {
  Auth: {
    identityPoolId: 'us-east-1:57a33aaf-0026-44e3-908c-7fb9d5730b9f',
    region: 'us-east-1',
  },
  geo: {
    AmazonLocationService: {
      maps: {
        items: {
          AmazonMap: {
            style: 'Default style',
          }
        },
        default: 'AmazonMap',
      },
      region: 'us-east-1',
    },
  },
}, Install the , , and libraries. 4. aws-amplify maplibre-gl@1 maplibre-gl-js-amplify @types/mapbox__mapbox-gl-draw npm install aws-amplify maplibre-gl@1 maplibre-gl-js-amplify
npm install @types/mapbox__mapbox-gl-draw --save-dev Configure the library. Change the file and add the file as below. 5. maplibre-gl angular.json maplibre-gl.css "styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "node_modules/maplibre-gl/dist/maplibre-gl.css",
  "src/styles.scss"
], Change the file. Add the global declaration as below. This configuration is required starting with Angular version 6. 6. src/polyfills.ts (window as any).global = window; Remove the content of the class from the file. Import the service and create the and methods as below. 7. AppComponent src/app/app.component.ts maplibre-gl-js-amplify getCurrentPosition loadMap import { AfterViewInit, Component } from '@angular/core';
import { Observable, Subscriber } from 'rxjs';
import { Amplify } from 'aws-amplify';
import { createMap } from 'maplibre-gl-js-amplify';
import * as maplibregl from 'maplibre-gl';

import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {

  map: any;

  constructor() {
    Amplify.configure(environment.amplify);
  }

  public ngAfterViewInit(): void {
    this.loadMap();
  }

  private getCurrentPosition(): any {
    return new Observable((observer: Subscriber<any>) => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position: any) => {
          observer.next({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          });
          observer.complete();
        });
      } else {
        observer.error();
      }
    });
  }

  private loadMap(): void {
    createMap({
      container: 'map',
      center: [0, 0],
      zoom: 0,
    })
    .then((map: any) => {
      this.map = map;

      this.map.addControl(new maplibregl.NavigationControl());
      this.map.addControl(new maplibregl.GeolocateControl());

      this.getCurrentPosition()
      .subscribe((position: any) => {
        this.map.flyTo({ center: [position.longitude, position.latitude], zoom: 13 });

        const marker = new maplibregl.Marker();
        marker.setLngLat([position.longitude, position.latitude]);
        marker.setPopup(new maplibregl.Popup().setHTML('Angular AWS Map'));
        marker.addTo(this.map);
      });
    });
  }
} Remove the contents of the file. Add the map tag as below. 8. src/app/app.component.html div <div class="container-fluid py-3">
  <h1>Angular AWS Map</h1>

  <div id="map"></div>
</div> Add the style in the file as below. 9. src/app/app.component.scss #map {
  height: 400px;
  width: 100%;
  max-width: 600px;
} Run the application with the command below. 10. npm start

> angular-aws-map@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |  11.02 MB | 
styles.css, styles.js | styles        | 522.10 kB | 
polyfills.js          | polyfills     | 294.90 kB | 
scripts.js            | scripts       |  76.33 kB | 
main.js               | main          |  11.18 kB | 
runtime.js            | runtime       |   6.88 kB | 

                      | Initial Total |  11.91 MB

Build at: 2022-04-26T10:47:33.505Z - Hash: 44780bc6612489fe - Time: 30672ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully. Note: If the error occurs, add the setting in the file as below. This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag. allowSyntheticDefaultImports tsconfig.json {
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
} Ready! Access the URL and check if the application is working. See the application working on and . 11. http://localhost:4200/ GitHub Pages 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 in Portuguese. blog To stay updated whenever I post new articles, follow me on . Twitter

Amazon

Google

Initialized

Twitter

Validating a User Phone Number With SMS on Auth0 Using ZENVIA

Creating and validating a reactive form to an Angular application

2021 - HackerNoon Contributor of the Year - WEB-DEVELOPMENT

2021 - HackerNoon Contributor of the Year - WEB

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Aws

Too Long; Didn't Read

Make resilience your competitive advantage

Adding the Map Component Using the AWS Services to an Angular App

Adding the Map Component Using the AWS Services to an Angular App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Hosting an Angular application on GitHub Pages using GitHub Actions

The Noonification: How Amazon Treats Warehouse Workers Who Contracted COVID (11/30/2022)

10 Free Ways to Promote Your Amazon Products

10 Failed Startup Product Examples by Google, Microsoft and Amazon

10 Best Infographics Of 2018

Hosting an Angular application on GitHub Pages using GitHub Actions

The Noonification: How Amazon Treats Warehouse Workers Who Contracted COVID (11/30/2022)

10 Free Ways to Promote Your Amazon Products

10 Failed Startup Product Examples by Google, Microsoft and Amazon

10 Best Infographics Of 2018

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps