{"id":16687408,"url":"https://github.com/rodrigokamada/angular-aws-map","last_synced_at":"2026-05-06T14:31:31.119Z","repository":{"id":43958275,"uuid":"481944063","full_name":"rodrigokamada/angular-aws-map","owner":"rodrigokamada","description":"Application example built with Angular 14 and adding the map MapLibre component using the Amazon Amplify Geo and Amazon Location Service services.","archived":false,"fork":false,"pushed_at":"2022-08-13T14:01:50.000Z","size":6891,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-31T00:36:18.672Z","etag":null,"topics":["amazon","amplify","angular","article","aws","devcommunity","frontend","geo","geolocation","ghactions","ghpages","hacktoberfest","location","map","maplibre","stackblitz","tutorial","typescript","webdev","webdevelopment"],"latest_commit_sha":null,"homepage":"https://rodrigokamada.github.io/angular-aws-map/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rodrigokamada.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"rodrigokamada"}},"created_at":"2022-04-15T11:58:58.000Z","updated_at":"2023-10-29T16:54:01.000Z","dependencies_parsed_at":"2022-08-20T05:22:02.886Z","dependency_job_id":null,"html_url":"https://github.com/rodrigokamada/angular-aws-map","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rodrigokamada/angular-aws-map","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-aws-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-aws-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-aws-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-aws-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodrigokamada","download_url":"https://codeload.github.com/rodrigokamada/angular-aws-map/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-aws-map/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32698094,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T08:33:17.875Z","status":"ssl_error","status_checked_at":"2026-05-06T08:33:17.221Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amazon","amplify","angular","article","aws","devcommunity","frontend","geo","geolocation","ghactions","ghpages","hacktoberfest","location","map","maplibre","stackblitz","tutorial","typescript","webdev","webdevelopment"],"created_at":"2024-10-12T15:09:04.168Z","updated_at":"2026-05-06T14:31:31.097Z","avatar_url":"https://github.com/rodrigokamada.png","language":"TypeScript","funding_links":["https://github.com/sponsors/rodrigokamada"],"categories":[],"sub_categories":[],"readme":"# Angular AWS Map\n\n\nApplication example built with [Angular](https://angular.io/) 14 and adding the map [MapLibre](https://maplibre.org/) component using the [Amazon Amplify Geo](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js/) and [Amazon Location Service](https://aws.amazon.com/location/) services.\n\nThis tutorial was posted on my [blog](https://rodrigo.kamada.com.br/blog/adicionando-o-componente-de-mapa-usando-os-servicos-da-amazon-em-uma-aplicacao-angular) in portuguese and on the [DEV Community](https://dev.to/rodrigokamada/adding-the-map-component-using-the-aws-services-to-an-angular-application-3a4a) in english.\n\n\n\n[![Website](https://shields.braskam.com/v1/shields?name=website\u0026format=rectangle\u0026size=small\u0026radius=5)](https://rodrigo.kamada.com.br)\n[![LinkedIn](https://shields.braskam.com/v1/shields?name=linkedin\u0026format=rectangle\u0026size=small\u0026radius=5)](https://www.linkedin.com/in/rodrigokamada)\n[![Twitter](https://shields.braskam.com/v1/shields?name=twitter\u0026format=rectangle\u0026size=small\u0026radius=5\u0026socialAccount=rodrigokamada)](https://twitter.com/rodrigokamada)\n[![Instagram](https://shields.braskam.com/v1/shields?name=instagram\u0026format=rectangle\u0026size=small\u0026radius=5)](https://www.instagram.com/rodrigokamada/)\n\n\n\n## Prerequisites\n\n\nBefore you start, you need to install and configure the tools:\n\n* [git](https://git-scm.com/)\n* [Node.js and npm](https://nodejs.org/)\n* [Angular CLI](https://angular.io/cli)\n* IDE (e.g. [Visual Studio Code](https://code.visualstudio.com/) or [WebStorm](https://www.jetbrains.com/webstorm/))\n\n\n\n## Getting started\n\n\n### Create and configure the account on the Amazon Location Service\n\n\n[Amazon Location Service](https://aws.amazon.com/location/) provides location functionality to applications without compromising data security and user privacy.\n\n\n**1.** Let's create and configure the account. Access the site [https://aws.amazon.com/location/](https://aws.amazon.com/location/) and click on the button *Get Started with Amazon Location Service*.\n\n![Amazon Location Service - Home page](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139657/Blog/angular-aws-map/angular-aws-map-step1.png)\n\n**2.** Click on the option *Root user*, fill in the field *Root user email address* and click on the button *Next*.\n\n![Amazon Location Service - Sign in](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139669/Blog/angular-aws-map/angular-aws-map-step2.png)\n\n**Note:**\n\n* 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](https://dev.to/rodrigokamada/authentication-using-the-amazon-cognito-to-an-angular-application-ilh)* in the session *Create and configure the account on the Amazon Cognito*.\n\n**3.** Fill in the field *Security check* and click on the button *Submit*.\n\n![Amazon Location Service - Security check](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139684/Blog/angular-aws-map/angular-aws-map-step3.png)\n\n**4.** Fill in the field *Password* and click on the button *Sign in*.\n\n![Amazon Location Service - Root user sign in](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139697/Blog/angular-aws-map/angular-aws-map-step4.png)\n\n**5.** Click on the menu *Services*.\n\n![Amazon Location Service - Add location data](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139715/Blog/angular-aws-map/angular-aws-map-step5.png)\n\n**6.** Click on the menu *Maps*.\n\n![Amazon Location Service - Menu Services](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139728/Blog/angular-aws-map/angular-aws-map-step6.png)\n\n**7.** Click on the link *Create map*.\n\n![Amazon Location Service - Maps](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139742/Blog/angular-aws-map/angular-aws-map-step7.png)\n\n**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*.\n\n![Amazon Location Service - Create map](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139761/Blog/angular-aws-map/angular-aws-map-step8.png)\n\n**9.** Click on the tab *Embed map*.\n\n![Amazon Location Service - Map information](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139771/Blog/angular-aws-map/angular-aws-map-step9.png)\n\n**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*.\n\n![Amazon Location Service - Embed map](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139795/Blog/angular-aws-map/angular-aws-map-step10.png)\n\n**11.** Fill in the field *Identity pool name*, click on the option *Enable access to unauthenticated identities* and click on the button *Create Pool*.\n\n![Amazon Location Service - New identity pool](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139806/Blog/angular-aws-map/angular-aws-map-step11.png)\n\n**12.** Click on the link *Edit*, fill in the field with the *JSON* below and click on the link *Allow*.\n\n```json\n{\n  \"Version\": \"2012-10-17\",\n  \"Statement\": [\n    {\n      \"Effect\": \"Allow\",\n      \"Action\": [\n        \"mobileanalytics:PutEvents\",\n        \"cognito-sync:*\",\n        \"geo:GetMap*\"\n      ],\n      \"Resource\": [\n        \"*\"\n      ],\n      \"Condition\": {\n        \"StringLike\": {\n          \"aws:referer\": [\n            \"*\"\n          ]\n        }\n      }\n    }\n  ]\n}\n```\n\n![Amazon Location Service - Identity the IAM roles](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139820/Blog/angular-aws-map/angular-aws-map-step12.png)\n\n**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.\n\n![Amazon Location Service - Getting started](https://res.cloudinary.com/rodrigokamada/image/upload/v1651139838/Blog/angular-aws-map/angular-aws-map-step13.png)\n\n**14.** Ready! Map and authentication pool created.\n\n\n### Create the Angular application\n\n\n[Angular](https://angular.io/) is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 13 and Google is the main maintainer of the project.\n\n\n**1.** Let's create the application with the Angular base structure using the `@angular/cli` with the route file and the SCSS style format.\n\n```powershell\nng new angular-aws-map --routing true --style scss\nCREATE angular-aws-map/README.md (1077 bytes)\nCREATE angular-aws-map/.editorconfig (274 bytes)\nCREATE angular-aws-map/.gitignore (548 bytes)\nCREATE angular-aws-map/angular.json (3327 bytes)\nCREATE angular-aws-map/package.json (1089 bytes)\nCREATE angular-aws-map/tsconfig.json (863 bytes)\nCREATE angular-aws-map/.browserslistrc (600 bytes)\nCREATE angular-aws-map/karma.conf.js (1443 bytes)\nCREATE angular-aws-map/tsconfig.app.json (287 bytes)\nCREATE angular-aws-map/tsconfig.spec.json (333 bytes)\nCREATE angular-aws-map/.vscode/extensions.json (130 bytes)\nCREATE angular-aws-map/.vscode/launch.json (474 bytes)\nCREATE angular-aws-map/.vscode/tasks.json (938 bytes)\nCREATE angular-aws-map/src/favicon.ico (948 bytes)\nCREATE angular-aws-map/src/index.html (309 bytes)\nCREATE angular-aws-map/src/main.ts (372 bytes)\nCREATE angular-aws-map/src/polyfills.ts (2338 bytes)\nCREATE angular-aws-map/src/styles.scss (80 bytes)\nCREATE angular-aws-map/src/test.ts (745 bytes)\nCREATE angular-aws-map/src/assets/.gitkeep (0 bytes)\nCREATE angular-aws-map/src/environments/environment.prod.ts (51 bytes)\nCREATE angular-aws-map/src/environments/environment.ts (658 bytes)\nCREATE angular-aws-map/src/app/app-routing.module.ts (245 bytes)\nCREATE angular-aws-map/src/app/app.module.ts (393 bytes)\nCREATE angular-aws-map/src/app/app.component.scss (0 bytes)\nCREATE angular-aws-map/src/app/app.component.html (23364 bytes)\nCREATE angular-aws-map/src/app/app.component.spec.ts (1133 bytes)\nCREATE angular-aws-map/src/app/app.component.ts (231 bytes)\n✔ Packages installed successfully.\n    Successfully initialized git.\n```\n\n**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](https://github.com/rodrigokamada/angular-bootstrap)*.\n\n**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.\n\n```typescript\namplify: {\n  Auth: {\n    identityPoolId: 'us-east-1:57a33aaf-0026-44e3-908c-7fb9d5730b9f',\n    region: 'us-east-1',\n  },\n  geo: {\n    AmazonLocationService: {\n      maps: {\n        items: {\n          AmazonMap: {\n            style: 'Default style',\n          }\n        },\n        default: 'AmazonMap',\n      },\n      region: 'us-east-1',\n    },\n  },\n},\n```\n\n**4.** Install the `aws-amplify`, `maplibre-gl-js-amplify` and `@types/geojson` libraries.\n\n```powershell\nnpm install aws-amplify maplibre-gl-js-amplify\nnpm install @types/geojson --save-dev\n```\n\n**5.** Configure the `maplibre-gl` library. Change the `angular.json` file and add the `maplibre-gl.css` file as below.\n\n```json\n\"styles\": [\n  \"node_modules/bootstrap/scss/bootstrap.scss\",\n  \"node_modules/bootstrap-icons/font/bootstrap-icons.css\",\n  \"node_modules/maplibre-gl/dist/maplibre-gl.css\",\n  \"src/styles.scss\"\n],\n```\n\n**6.** Change the `src/polyfills.ts` file. Add the global declaration as below. This configuration is required starting with Angular version 6.\n\n```typescript\n(window as any).global = window;\n```\n\n**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.\n\n```typescript\nimport { AfterViewInit, Component } from '@angular/core';\nimport { Observable, Subscriber } from 'rxjs';\nimport Amplify from 'aws-amplify';\nimport { createMap } from 'maplibre-gl-js-amplify';\nimport * as maplibregl from 'maplibre-gl';\n\nimport { environment } from '../environments/environment';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements AfterViewInit {\n\n  map: any;\n\n  constructor() {\n    Amplify.configure(environment.amplify);\n  }\n\n  public ngAfterViewInit(): void {\n    this.loadMap();\n  }\n\n  private getCurrentPosition(): any {\n    return new Observable((observer: Subscriber\u003cany\u003e) =\u003e {\n      if (navigator.geolocation) {\n        navigator.geolocation.getCurrentPosition((position: any) =\u003e {\n          observer.next({\n            latitude: position.coords.latitude,\n            longitude: position.coords.longitude,\n          });\n          observer.complete();\n        });\n      } else {\n        observer.error();\n      }\n    });\n  }\n\n  private loadMap(): void {\n    createMap({\n      container: 'map',\n      center: [0, 0],\n      zoom: 0,\n    })\n    .then((map: any) =\u003e {\n      this.map = map;\n\n      this.map.addControl(new maplibregl.NavigationControl());\n      this.map.addControl(new maplibregl.GeolocateControl());\n\n      this.getCurrentPosition()\n      .subscribe((position: any) =\u003e {\n        this.map.flyTo({ center: [position.longitude, position.latitude], zoom: 13 });\n\n        const marker = new maplibregl.Marker();\n        marker.setLngLat([position.longitude, position.latitude]);\n        marker.setPopup(new maplibregl.Popup().setHTML('Angular AWS Map'));\n        marker.addTo(this.map);\n      });\n    });\n  }\n}\n```\n\n**8.** Remove the contents of the `src/app/app.component.html` file. Add the map `div` tag as below.\n\n```html\n\u003cdiv class=\"container-fluid py-3\"\u003e\n  \u003ch1\u003eAngular AWS Map\u003c/h1\u003e\n\n  \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n**9.** Add the style in the `src/app/app.component.scss` file as below.\n\n```css\n#map {\n  height: 400px;\n  width: 100%;\n  max-width: 600px;\n}\n```\n\n**10.** Run the application with the command below.\n\n```powershell\nnpm start\n\n\u003e angular-aws-map@1.0.0 start\n\u003e ng serve\n\n✔ Browser application bundle generation complete.\n\nInitial Chunk Files   | Names         |  Raw Size\nvendor.js             | vendor        |  11.02 MB | \nstyles.css, styles.js | styles        | 522.10 kB | \npolyfills.js          | polyfills     | 294.90 kB | \nscripts.js            | scripts       |  76.33 kB | \nmain.js               | main          |  11.18 kB | \nruntime.js            | runtime       |   6.88 kB | \n\n                      | Initial Total |  11.91 MB\n\nBuild at: 2022-04-26T10:47:33.505Z - Hash: 44780bc6612489fe - Time: 30672ms\n\n** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n\n\n✔ Compiled successfully.\n```\n\n**11.** Ready! Access the URL `http://localhost:4200/` and check if the application is working. See the application working on [GitHub Pages](https://rodrigokamada.github.io/angular-aws-map/) and [Stackblitz](https://stackblitz.com/edit/angular14-aws-map).\n\n![Angular AWS Map]()\n\n\n\n## Cloning the application\n\n**1.** Clone the repository.\n\n```powershell\ngit clone git@github.com:rodrigokamada/angular-aws-map.git\n```\n\n**2.** Install the dependencies.\n\n```powershell\nnpm ci\n```\n\n**3.** Run the application.\n\n```powershell\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-aws-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodrigokamada%2Fangular-aws-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-aws-map/lists"}