{"id":16687371,"url":"https://github.com/rodrigokamada/angular-tomtom","last_synced_at":"2025-12-29T16:37:00.292Z","repository":{"id":49389033,"uuid":"436752368","full_name":"rodrigokamada/angular-tomtom","owner":"rodrigokamada","description":"Application example built with Angular 14 and adding the map component using the @tomtom-international/web-sdk-maps library.","archived":false,"fork":false,"pushed_at":"2022-07-26T11:20:29.000Z","size":4921,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-09T19:48:52.061Z","etag":null,"topics":["angular","beginners","devcommunity","frontend","geolocation","ghactions","ghpages","hacktoberfest","map","stackblitz","tomtom","tutorial","web","webdev","webdevelopment"],"latest_commit_sha":null,"homepage":"https://rodrigokamada.github.io/angular-tomtom/","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":"2021-12-09T20:29:02.000Z","updated_at":"2023-10-29T16:53:50.000Z","dependencies_parsed_at":"2022-09-12T14:23:41.410Z","dependency_job_id":null,"html_url":"https://github.com/rodrigokamada/angular-tomtom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-tomtom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-tomtom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-tomtom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigokamada%2Fangular-tomtom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodrigokamada","download_url":"https://codeload.github.com/rodrigokamada/angular-tomtom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243439898,"owners_count":20291196,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular","beginners","devcommunity","frontend","geolocation","ghactions","ghpages","hacktoberfest","map","stackblitz","tomtom","tutorial","web","webdev","webdevelopment"],"created_at":"2024-10-12T15:08:57.562Z","updated_at":"2025-12-29T16:36:55.270Z","avatar_url":"https://github.com/rodrigokamada.png","language":"TypeScript","readme":"# Angular TomTom\n\n\nApplication example built with [Angular](https://angular.io/) 14 and adding the map TomTom component using the [@tomtom-international/web-sdk-maps](https://www.npmjs.com/package/@tomtom-international/web-sdk-maps) library.\n\nThis tutorial was posted on my [blog](https://rodrigo.kamada.com.br/blog/adicionando-o-componente-de-mapa-tomtom-em-uma-aplicacao-angular) in portuguese and on the [DEV Community](https://dev.to/rodrigokamada/adding-the-map-tomtom-component-to-an-angular-application-54fk) 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/))\n\n\n\n## Getting started\n\n\n### Create and configure the account on the TomTom\n\n\n**1.** Let's create the account. Access the site [https://www.tomtom.com/](https://www.tomtom.com/), click on the menu *Developers* and click on the submenu *Developer portal*.\n\n![TomTom - Home page](https://res.cloudinary.com/rodrigokamada/image/upload/v1639316809/Blog/angular-tomtom/tomtom-step1.png)\n\n**2.** Click on the button *REGISTER*.\n\n![TomTom - Developer portal](https://res.cloudinary.com/rodrigokamada/image/upload/v1639317617/Blog/angular-tomtom/tomtom-step2.png)\n\n**3.** Fill in the fields *Full name*, *Username*, *Email*, *Password*, click on the checkbox *I have read and agreed with the terms and conditions for using Maps APIs.* and click on the button *REGISTER*.\n\n![TomTom - Register](https://res.cloudinary.com/rodrigokamada/image/upload/v1639317618/Blog/angular-tomtom/tomtom-step3.png)\n\n**4.** Check the registered email.\n\n![TomTom - Check email](https://res.cloudinary.com/rodrigokamada/image/upload/v1639318444/Blog/angular-tomtom/tomtom-step4.png)\n\n**5.** Click on the button *ACTIVATE ACCOUNT* in the email sent.\n\n![TomTom - Activate account](https://res.cloudinary.com/rodrigokamada/image/upload/v1639318653/Blog/angular-tomtom/tomtom-step5.png)\n\n**6.** Click on the link *MY DASHBOARD*.\n\n![TomTom - Let's start building](https://res.cloudinary.com/rodrigokamada/image/upload/v1639319263/Blog/angular-tomtom/tomtom-step6.png)\n\n**7.** Copy the key displayed in the *Keys* menu and, in my case, the key `POQwSkANG2wVgN1qMbook38s5EMkN7pG` was displayed because this key will be configured in the Angular application.\n\n![TomTom - Keys](https://res.cloudinary.com/rodrigokamada/image/upload/v1639319267/Blog/angular-tomtom/tomtom-step7.png)\n\n**8.** Ready! Account created and key generated.\n\n\n### Create the Angular application\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-tomtom --routing true --style scss\nCREATE angular-tomtom/README.md (1059 bytes)\nCREATE angular-tomtom/.editorconfig (274 bytes)\nCREATE angular-tomtom/.gitignore (620 bytes)\nCREATE angular-tomtom/angular.json (3255 bytes)\nCREATE angular-tomtom/package.json (1078 bytes)\nCREATE angular-tomtom/tsconfig.json (863 bytes)\nCREATE angular-tomtom/.browserslistrc (600 bytes)\nCREATE angular-tomtom/karma.conf.js (1431 bytes)\nCREATE angular-tomtom/tsconfig.app.json (287 bytes)\nCREATE angular-tomtom/tsconfig.spec.json (333 bytes)\nCREATE angular-tomtom/.vscode/extensions.json (130 bytes)\nCREATE angular-tomtom/.vscode/launch.json (474 bytes)\nCREATE angular-tomtom/.vscode/tasks.json (938 bytes)\nCREATE angular-tomtom/src/favicon.ico (948 bytes)\nCREATE angular-tomtom/src/index.html (299 bytes)\nCREATE angular-tomtom/src/main.ts (372 bytes)\nCREATE angular-tomtom/src/polyfills.ts (2338 bytes)\nCREATE angular-tomtom/src/styles.scss (80 bytes)\nCREATE angular-tomtom/src/test.ts (745 bytes)\nCREATE angular-tomtom/src/assets/.gitkeep (0 bytes)\nCREATE angular-tomtom/src/environments/environment.prod.ts (51 bytes)\nCREATE angular-tomtom/src/environments/environment.ts (658 bytes)\nCREATE angular-tomtom/src/app/app-routing.module.ts (245 bytes)\nCREATE angular-tomtom/src/app/app.module.ts (393 bytes)\nCREATE angular-tomtom/src/app/app.component.scss (0 bytes)\nCREATE angular-tomtom/src/app/app.component.html (23364 bytes)\nCREATE angular-tomtom/src/app/app.component.spec.ts (1097 bytes)\nCREATE angular-tomtom/src/app/app.component.ts (219 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 TomTom key in the `src/environments/environment.ts` and `src/environments/environment.prod.ts` files as below.\n\n```typescript\ntomtom: {\n  key: 'POQwSkANG2wVgN1qMbook38s5EMkN7pG',\n},\n```\n\n**4.** Install the `@tomtom-international/web-sdk-maps` library.\n\n```powershell\nnpm install @tomtom-international/web-sdk-maps\n```\n\n**5.** Configure the `@tomtom-international/web-sdk-maps` library. Change the `angular.json` file and add the `maps.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/@tomtom-international/web-sdk-maps/dist/maps.css\",\n  \"src/styles.scss\"\n],\n```\n\n**6.** Remove the contents of the `AppComponent` class from the `src/app/app.component.ts` file. Create the `getCurrentPosition` and `loadMap` methods as below.\n\n```typescript\nimport { AfterViewInit, Component } from '@angular/core';\nimport { Observable, Subscriber } from 'rxjs';\nimport * as tt from '@tomtom-international/web-sdk-maps';\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  }\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    this.map = tt.map({\n      key: environment.tomtom.key,\n      container: 'map',\n    });\n\n    this.map.addControl(new tt.FullscreenControl());\n    this.map.addControl(new tt.NavigationControl());\n\n    this.getCurrentPosition()\n    .subscribe((position: any) =\u003e {\n      this.map.flyTo({\n        center: {\n          lat: position.latitude,\n          lng: position.longitude,\n        },\n        zoom: 13,\n      });\n\n      const popup = new tt.Popup({ anchor: 'bottom', offset: { bottom: [0, -40] } }).setHTML('Angular TomTom');\n  \n      var marker = new tt.Marker().setLngLat({\n        lat: 37.7749,\n        lng: -122.4194,\n      }).addTo(this.map);\n      marker.setPopup(popup).togglePopup();\n    });\n  }\n\n}\n```\n\n**7.** 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 TomTom\u003c/h1\u003e\n\n  \u003cdiv id=\"map\" class=\"map\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n**8.** 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**9.** Run the application with the command below.\n\n```powershell\nnpm start\n\n\u003e angular-tomtom@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        |   3.66 MB | \nstyles.css, styles.js | styles        | 521.05 kB | \npolyfills.js          | polyfills     | 339.20 kB | \nscripts.js            | scripts       |  76.33 kB | \nmain.js               | main          |  10.36 kB | \nruntime.js            | runtime       |   6.86 kB | \n\n                      | Initial Total |   4.59 MB\n\nBuild at: 2021-12-12T17:33:13.265Z - Hash: e4a77c4fe28aa482 - Time: 4248ms\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**Note:**\n\n* If the error `Module '\"/node_modules/@types/geojson/index\"' has no default export. Did you mean to use 'import { GeoJSON } from \"/node_modules/@types/geojson/index\"' instead?` occurs, add the setting `allowSyntheticDefaultImports` in the `tsconfig.json` file as below.\n\n```typescript\n{\n  \"compilerOptions\": {\n    \"allowSyntheticDefaultImports\": true\n  }\n}\n```\n\n**10.** 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-tomtom/) and [Stackblitz](https://stackblitz.com/edit/angular14-tomtom).\n\n![Angular TomTom](https://res.cloudinary.com/rodrigokamada/image/upload/v1639351457/Blog/angular-tomtom/angular-tomtom.png)\n\n\n\n## Cloning the application\n\n**1.** Clone the repository.\n\n```powershell\ngit clone git@github.com:rodrigokamada/angular-tomtom.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","funding_links":["https://github.com/sponsors/rodrigokamada"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-tomtom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodrigokamada%2Fangular-tomtom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigokamada%2Fangular-tomtom/lists"}