MapMouseEvent Listener can't make changes to Angular model

Maps SDK for Web (JavaScript)
#1

Hi,
I am trying to capture the lonlat of mouse click on map into my Angular component. I used the map.on() function to attach my listener to map. After the mouse click the function is called and the MapMouseEvent object show the correct lonlat but they cannot be copied in my component’s model. This is because the listener function is executed in a different scope, something called ZoneDelagate.invokeTask, in which all the references of my Angular component are showing undefined value. As a result, after the function is executed, the component holds old values.

I tried many things, but in vein. The root cause seems to be, the scope of listener’s execution is different from the Angular component’s scope and it is not accessible.

Kindly suggest how to solve this.
Regards,
Nilesh

#2

Can you share a minimal piece of code that reproduces this?

#3

Hi Przemek,
I was trying to upload zip file containing four files of angular component and 4 screenshots , but it is not allowing.
Here are the Angular component two main file :
Regards,
Nilesh

Screenshot0
Screenshot01920×1080 152 KB 

//This is tt-map.component.ts***********************************************************

import { Component, OnInit, ViewEncapsulation } from '@angular/core';


import { AppComponent } from '../app.component';
import tt, { LngLat, MapMouseEvent, MapSourceDataEvent } from '@tomtom-international/web-sdk-maps'
import * as e from 'cors';

  

@Component({
  selector: 'tt-map',
  templateUrl: './tt-map.component.html',
  styleUrls: ['./tt-map.component.css',
              './Tomtom.css'], 
              encapsulation: ViewEncapsulation.None
})
 



export class TTMapComponent implements OnInit {


  ngOnInit(): void { }

  constructor( component : AppComponent) {
  }

  mapLoaded : boolean = false;
  mapObject? : tt.Map;

  ll123 : LngLat = new tt.LngLat(78.8718, 21.7679); 
  
  processShowMap(){

    if(!this.mapLoaded) {
      let mapElement =  document.getElementById('tomtommap');
      var ll = new tt.LngLat(78.8718, 21.7679); // India
      

      if(mapElement != null) {
        this.mapObject = tt.map({ key: "<Your API Key>", 
                  container: mapElement,
                  zoom : 3,
                  center : ll });
        
        this.mapObject.on('click', this.processTTMapMouseClickEvent);
                  this.mapLoaded = true;
      }
      
    }
    
  } 

  processTTMapMouseClickEvent(event : MapMouseEvent<'click'>){
    

    this.ll123 = event.lngLat;
    console.log(this.ll123.lat)
    console.log(this.ll123.lng)
    

  }

  
  
  
  }

//This is tt-map.component.html file ***************************************************************************
<button type="button" (click)="processShowMap()">Show Map </button> <br>

Long : {{ ll123.lng  }} <br>
Lat : {{ll123.lat}} <br>
<table >
    <tr>
        <td width="65%">
            <table border="1" width="100%" height="100%" 
                   style="height:100%;display:block;"
                    >
                <tr>
                    <td>
                        <div id = "tomtommap" 
                             style = "height: 500px; width: 600px;" 
                             class = "map"
                             ></div>
                    </td>
                </tr>
            </table>
            
        </td>
    </tr>
</table>
#4

It is because this in processTTMapMouseClickEvent is the other object.

Try to modify the code like this:

processShowMap(){
...
const self = this;
this.mapObject.on('click', (event) => {
  this.processTTMapMouseClickEvent(event, self)
});
...

and

processTTMapMouseClickEvent(event : MapMouseEvent<'click'>, self : MapComponent){
    console.log(self);
    self.ll123 = event.lngLat;
}
#5

Thanks, Przemek, It worked!