TomTom Maps in Ionic Capacitor App

Home.page.html

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      TomTom Maps
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div #map id="map"></div>
  <div class="data-div">
    <div class="ion-text-center ion-padding" *ngIf="!currentLocationAvailable">
      <ion-button expand="full" (click)="getLocation()">Get Location</ion-button>
    </div>
    <ion-list-header *ngIf="reverseGeoCoded">Your Location</ion-list-header>
    <div class="ion-padding" *ngIf="reverseGeoCoded">
      {{reverseGeoCoded}}
    </div>
    <div *ngIf="reverseGeoCoded">
      <ion-list-header>Search Results</ion-list-header>
      <ion-item>
        <ion-label color="primary">Search Term</ion-label>
        <ion-input [(ngModel)]="query"></ion-input>
      </ion-item>
      <div class="ion-text-center ion-padding" *ngIf="!searchResultsAvailable && reverseGeoCoded">
        <ion-button expand="full" (click)="search()">Get Search Results</ion-button>
      </div>
      <ion-list *ngIf="searchResults && searchResults.length">

        <ion-item *ngFor="let res of searchResults">
          <ion-label>{{res.address.freeformAddress}} {{res.address.countryCodeISO3}}</ion-label>
          <ion-button fill="clear" size="small" slot="end" (click)="locateResult(res)">
            Locate
          </ion-button>
        </ion-item>
      </ion-list>
    </div>
  </div>
</ion-content>

home.page.ts

import { Component } from '@angular/core';
import tt from '@tomtom-international/web-sdk-maps';
import { Geolocation, Position } from '@capacitor/geolocation';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  map: tt.Map;
  center = { lng: -71.1167, lat: 42.3770 };
  reverseGeoCoded: any;
  query: string = 'pizza';
  searchResults: any;
  currentLocationAvailable: boolean = false;
  searchResultsAvailable: boolean = false;
  searchResultMarker: any;
  constructor(private http: HttpClient) {}
  ionViewDidEnter() {
    console.log('load')
    this.map = tt.map({
      key: "YOUR_API_KEY",
      container: "map",
      center: this.center,
      zoom: 11,
    });
    let marker = new tt.Marker().setLngLat(this.center).addTo(this.map);
  }
  async getLocation() {
    const coordinates: Position = await Geolocation.getCurrentPosition();
    let marker2 = new tt.Marker({ color: 'green' }).setLngLat([coordinates.coords.longitude, coordinates.coords.latitude]).addTo(this.map);
    this.getAddress(coordinates.coords);
  }

  async getAddress(home) {
    const res: any = await this.http.get(`https://api.tomtom.com/search/2/reverseGeocode/${home.latitude}%2C${home.longitude}.json?key=YOUR_API_KEY`).toPromise();
    this.reverseGeoCoded = res.addresses[0].address.freeformAddress + ' ' + res.addresses[0].address.countryCodeISO3;
  }

  async search() {
    const coordinates: Position = await Geolocation.getCurrentPosition();
    const res: any = await this.http.get(`https://api.tomtom.com/search/2/search/${this.query}.json?lat=${coordinates.coords.latitude}&lon=${coordinates.coords.longitude}&key=YOUR_API_KEY`).toPromise();
    this.searchResults = res.results;
  }

  locateResult(place) {
    this.searchResultMarker = new tt.Marker({ color: 'orange' }).setLngLat([place.position.lon, place.position.lat]).addTo(this.map);
    this.map.setCenter({ lng: place.position.lon, lat: place.position.lat });
    this.map.setZoom(15);
  }
}