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

Angular Map Init

Overview

This tutorial shows how to display the map using TomTom SDK and Angular.

Prerequisites

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

  • Angular instalation

    Set up the Angular development environment

    You need to set up your development environment before you can do anything. The best way to do this is to follow instructions on Angular quickstart guide section: quickstart.

  • An SDK that can be downloaded from here: Downloads. Save and unzip the Maps SDK for Web with vector maps folder. This tutorial assumes your folder is named ‘sdk’. If you choose another name, remember to change the provided paths to match.

    Check out the current file structure

    .
    └── sdk-tutorial
        └── sdk
            ├── LICENSE.txt
            ├── README.md
            ├── glyphs
            ├── images
            ├── map.css
            ├── mapbox-gl-js
            ├── sprites
            ├── styles
            ├── tomtom.min.js
            └── tomtom.min.js.map
        
  • API key

    Create your API key now

    To create a new API key you need to first register on the portal. Once you are logged in there are only two steps remaining:

    Create a new application in your Dashboard:

    Choose all the APIs:

    All set up. You can now click on your newly created app and copy your API key:

Displaying a map

You should have the TomTom SDK and the Angular environment installed on your computer so far. Great! Next step is to connect them. See the Angular's root file structure:

src
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   └── app.module.ts
├── assets
│   └──.gitkeep
├── browserslist
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── karma.conf.js
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── tslint.json

Go to the src/assets folder. That's the place where you can put images and anything else to be copied in bulk when you build your application.

So, add the sdk to assets directory:

src
└── assets
    ├── sdk
    └──.gitkeep

Now, go to the root directory of the project and open angular.json file. Here you can set several defaults and also configure what files are included when your project is built.

Look at the lines:

"styles": [
  "src/styles.css"
],
"scripts": []

You need to to attach a paths to SDK's style file (CSS) and javascript file. After the change it should look like this:

"styles": [
  "src/styles.css",
  "src/assets/sdk/map.css"
],
"scripts": [
  "src/assets/sdk/tomtom.min.js"
]

To apply changes you need to stop your application by pressing Ctrl + C and run it again.

Now, when sdk is included in your project, go to the app.component.ts file, which is located in src/app.

To initialize and display a TomTom map, copy the code below and paste it to the app.component.ts file:

import { Component, OnInit } from '@angular/core';
declare let L;
declare let tomtom: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    ngOnInit() {
        const map = tomtom.L.map('map', {
          key: '<your-api-key>',
          basePath: '/assets/sdk',
          center: [ 52.360306, 4.876935 ],
          zoom: 15,
          source : 'vector'
        });
    }
}

Go to the styles.css file (src/styles.css). Your global styles (that affect all of your app) go here. Copy and paste the code:

body {
  margin:0;
  padding:0;
}

Create the map div in src/app/app.component.html:

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

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

#map {
    height: 100vh;
    width: 100vw;
}

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

You are here