Sorry, you need to enable JavaScript to visit this website.

Angular Maps API integration tutorial

Overview

This tutorial shows how to display a map using TomTom Maps SDK for Web v5 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':
              cd my-app
              npm i @tomtom-international/web-sdk-maps
            
  • API Key
     

    Get your API Key now

    To create a new API Key you need to first register on the portal. Once you are logged in there is only one step remaining:

    Go to your Dashboard:

    You can now click on your app - My first app and copy your API Key:

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.

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

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

      export class AppComponent implements OnInit {
        ngOnInit() {
          const map = tt.map({
            key: '<your-api-key>',
            container: 'map',
            style: 'tomtom://vector/1/basic-main'
          });
          map.addControl(new tt.NavigationControl());
        }
      }
    

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

      @import "@tomtom-international/web-sdk-maps";
      
      #map {
          height: 100vh;
          width: 100vw;
      }
    

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

You are here