Angular Map Display API integration tutorial

Overview

This tutorial shows how to display a map using TomTom Maps SDK for Web v6 and Angular v8.2.10.

Prerequisites

To start using the TomTom Maps SDK for Web with Angular, you need the following:

• Angular installation You need to set up your development environment before you can do anything. The best way to do this is to follow instructions on the Angular setting up Local Environment: Setting up the Local Environment and Workspace.
• The SDK that can be downloaded using 'npm':
  Copycd my-app npm i @tomtom-international/web-sdk-maps

  cd my-app
  npm i @tomtom-international/web-sdk-maps

• API Key - If you don't have an API key visit a How to get a TomTom API key site and create one.

Displaying a map

You should now have the Maps SDK for Web and the Angular environment installed on your computer. Great! The next step is to connect them.

Go to the src/app folder.

Open app.component.html and remove all the content.

Add a div that is the container for the map.

<div id="map"></div>

Open the app.component.ts file.

Add import statement to add the Maps library. You need to disable View Encapsulation, otherwise DOM elements won't match CSS selectors.

1import { Component, OnInit, ViewEncapsulation } from '@angular/core'
2import tt from '@tomtom-international/web-sdk-maps';
3
4@Component({
5  selector: 'app-root',
6  templateUrl: './app.component.html',
7  styleUrls: ['./app.component.css'],
8  encapsulation: ViewEncapsulation.None
9})

In ngOnInit you may now initialize the map. Replace the key with your own API key.

1export class AppComponent implements OnInit {
2  ngOnInit() {
3    const map = tt.map({
4      key: "<your-api-key>",
5      container: "map",
6    })
7    map.addControl(new tt.NavigationControl())
8  }
9}

Now, add the styles for your App Component in src/app/app.component.css.

1@import "@tomtom-international/web-sdk-maps";
2
3#map {
4  height: 100vh;
5  width: 100vw;
6}

If you run your application now, you should see the map on the whole screen!