Angular | How to get lng and lat with event click in map?

Maps SDK for Web (JavaScript)
#1

Hi, I’m trying to develop the example: “taxi cars dispatcher” with angular but I can not get the latitude and longitude when I do click in map.

How I can do develop this code in typescript and angular?

map.on('click', function (event) {
    **const position = event.lngLat;**
    tt.services.reverseGeocode({
        key: apiKey,
        position: position
    })
        .go().then(function (results) {
            drawPassengerMarkerOnMap(results);
        });
});

In my component.html I have:
< div id=‘map’
(click)=‘myFunctionToGetCoordinates($event)’

but in my component.ts , I can’t get event.lngLat like the example

How can I do this?

Thanks

#2

Hello, this blog may be helpful: https://developer.tomtom.com/blog/build-different/using-tomtom-maps-sdk-angular-and-typescript

#3

Just tried and this works:

import { Component } from '@angular/core';
import tt from '@tomtom-international/web-sdk-maps';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-events';
  map:any;

  ngOnInit() {
    this.map = tt.map({
      key: '<your-api-key>',
      container: 'map',
      style: 'tomtom://vector/1/basic-main',
      zoom:1.2
    });

    this.map.on('click', function(e) {
      console.log(e.lngLat);
    })
  }

}