Adding the map TomTom component to an 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 is a library that hides the complexity of integration with TomTom services, boosting productivity with fully styleable and easily customized components. @tomtom-international/web-sdk-maps Prerequisites Before you start, you need to install and configure the tools: git Node.js and npm Angular CLI IDE (e.g. ) Visual Studio Code Getting started Create and configure the account on the TomTom Let's create the account. Access the site , click on the menu and click on the submenu . 1. https://www.tomtom.com/ Developers Developer portal Click on the button . 2. REGISTER Fill in the fields , , , , click on the checkbox and click on the button . 3. Full name Username Email Password I have read and agreed with the terms and conditions for using Maps APIs. REGISTER Check the registered email. 4. Click on the button in the email sent. 5. ACTIVATE ACCOUNT Click on the link . 6. MY DASHBOARD Copy the key displayed in the menu and, in my case, the key was displayed because this key will be configured in the Angular application. 7. Keys POQwSkANG2wVgN1qMbook38s5EMkN7pG Ready! Account created and key generated. 8. Create the Angular application 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-tomtom --routing true --style scss CREATE angular-tomtom/README.md (1059 bytes) CREATE angular-tomtom/.editorconfig (274 bytes) CREATE angular-tomtom/.gitignore (620 bytes) CREATE angular-tomtom/angular.json (3255 bytes) CREATE angular-tomtom/package.json (1078 bytes) CREATE angular-tomtom/tsconfig.json (863 bytes) CREATE angular-tomtom/.browserslistrc (600 bytes) CREATE angular-tomtom/karma.conf.js (1431 bytes) CREATE angular-tomtom/tsconfig.app.json (287 bytes) CREATE angular-tomtom/tsconfig.spec.json (333 bytes) CREATE angular-tomtom/.vscode/extensions.json (130 bytes) CREATE angular-tomtom/.vscode/launch.json (474 bytes) CREATE angular-tomtom/.vscode/tasks.json (938 bytes) CREATE angular-tomtom/src/favicon.ico (948 bytes) CREATE angular-tomtom/src/index.html (299 bytes) CREATE angular-tomtom/src/main.ts (372 bytes) CREATE angular-tomtom/src/polyfills.ts (2338 bytes) CREATE angular-tomtom/src/styles.scss (80 bytes) CREATE angular-tomtom/src/test.ts (745 bytes) CREATE angular-tomtom/src/assets/.gitkeep (0 bytes) CREATE angular-tomtom/src/environments/environment.prod.ts (51 bytes) CREATE angular-tomtom/src/environments/environment.ts (658 bytes) CREATE angular-tomtom/src/app/app-routing.module.ts (245 bytes) CREATE angular-tomtom/src/app/app.module.ts (393 bytes) CREATE angular-tomtom/src/app/app.component.scss (0 bytes) CREATE angular-tomtom/src/app/app.component.html (23364 bytes) CREATE angular-tomtom/src/app/app.component.spec.ts (1097 bytes) CREATE angular-tomtom/src/app/app.component.ts (219 bytes) ✔ Packages installed successfully. Successfully initialized git. Install and configure the Bootstrap CSS framework. Complete steps 2 and 3 of the post . 2. Adding the Bootstrap CSS framework to an Angular application Configure the TomTom key in the and files as below. 3. src/environments/environment.ts src/environments/environment.prod.ts tomtom: { key: 'POQwSkANG2wVgN1qMbook38s5EMkN7pG', }, Install the library. 4. @tomtom-international/web-sdk-maps npm install @tomtom-international/web-sdk-maps Configure the library. Change the file and add the file as below. 5. @tomtom-international/web-sdk-maps angular.json maps.css "styles": [ "node_modules/bootstrap/scss/bootstrap.scss", "node_modules/bootstrap-icons/font/bootstrap-icons.css", "node_modules/@tomtom-international/web-sdk-maps/dist/maps.css", "src/styles.scss" ], Remove the contents of the class from the file. Create the and methods as below. 6. AppComponent src/app/app.component.ts getCurrentPosition loadMap import { AfterViewInit, Component } from '@angular/core'; import { Observable, Subscriber } from 'rxjs'; import * as tt from '@tomtom-international/web-sdk-maps'; 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() { } public ngAfterViewInit(): void { this.loadMap(); } private getCurrentPosition(): any { return new Observable((observer: Subscriber ) => { 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 { this.map = tt.map({ key: environment.tomtom.key, container: 'map', }); this.map.addControl(new tt.FullscreenControl()); this.map.addControl(new tt.NavigationControl()); this.getCurrentPosition() .subscribe((position: any) => { this.map.flyTo({ center: { lat: position.latitude, lng: position.longitude, }, zoom: 13, }); const popup = new tt.Popup({ anchor: 'bottom', offset: { bottom: [0, -40] } }).setHTML('Angular TomTom'); var marker = new tt.Marker().setLngLat({ lat: 37.7749, lng: -122.4194, }).addTo(this.map); marker.setPopup(popup).togglePopup(); }); } } Remove the contents of the file. Add the map tag as below. 7. src/app/app.component.html div Angular TomTom Add the style in the file as below. 8. src/app/app.component.scss #map { height: 400px; width: 100%; max-width: 600px; } Run the application with the command below. 9. npm start > angular-tomtom@1.0.0 start > ng serve ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Raw Size vendor.js | vendor | 3.66 MB | styles.css, styles.js | styles | 521.05 kB | polyfills.js | polyfills | 339.20 kB | scripts.js | scripts | 76.33 kB | main.js | main | 10.36 kB | runtime.js | runtime | 6.86 kB | | Initial Total | 4.59 MB Build at: 2021-12-12T17:33:13.265Z - Hash: e4a77c4fe28aa482 - Time: 4248ms ** 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. Module '"/node_modules/@types/geojson/index"' has no default export. Did you mean to use 'import { GeoJSON } from "/node_modules/@types/geojson/index"' instead? allowSyntheticDefaultImports tsconfig.json { "compilerOptions": { "allowSyntheticDefaultImports": true } } Ready! Access the URL and check if the application is working. See the application working on and . 10. http://localhost:4200/ GitHub Pages Stackblitz The application repository is available at . https://github.com/rodrigokamada/angular-tomtom This tutorial was posted on my in Portuguese. blog