Adding the map TomTom component to an Angular application
Introduction
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.
@tomtom-international/web-sdk-maps is a library that hides the complexity of integration with TomTom services, boosting the productivity with fully styleable and easily customized components.
Prerequisites
Before you start, you need to install and configure the tools:
Getting started
Create and configure the account on the TomTom
1. Let’s create the account. Access the site https://www.tomtom.com/, click on the menu Developers and click on the submenu Developer portal.
2. Click on the button REGISTER.
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.
4. Check the registered email.
5. Click on the button ACTIVATE ACCOUNT in the email sent.
6. Click on the link MY DASHBOARD.
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.
8. Ready! Account created and key generated.
Create the Angular application
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 TomTom key in the src/environments/environment.ts
and src/environments/environment.prod.ts
files as below.
4. Install the @tomtom-international/web-sdk-maps
library.
5. Configure the @tomtom-international/web-sdk-maps
library. Change the angular.json
file and add the maps.css
file as below.
6. Remove the contents of the AppComponent
class from the src/app/app.component.ts
file. Create the getCurrentPosition
and loadMap
methods as below.
7. Remove the contents of the src/app/app.component.html
file. Add the map div
tag as below.
8. Add the style in the src/app/app.component.scss
file as below.
9. Run the application with the command below.
Note:
- 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 settingallowSyntheticDefaultImports
in thetsconfig.json
file as below.
10. 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-tomtom.
This tutorial was posted on my blog in portuguese.