CODEWITHSUNDEEP
here-api
VM-Rui
VM-Rui

Reputation: 13

Here map javascript api for Angular App, memory leak happen for open the here map page

when every time open here map page:

this.router.navigate(['/car-section/here-map'],  {replaceUrl: false});

html here map page code:

<div #map class="map-container">

Here Map Component:

export class HereMapComponent implements OnInit {

  private platform: any;
  private mapHere:any;

........

@ViewChild("map", {static: true}) public mapElement: ElementRef;

  constructor() {
    this.platform = new H.service.Platform({
      'apikey': API_Key
    });

   }

......


 public ngAfterViewInit() {

    setTimeout(() => {

      let defaultLayers = this.platform.createDefaultLayers();
      this.mapHere = new H.Map(
          this.mapElement.nativeElement,
          defaultLayers.vector.normal.map, //3.1
          // defaultLayers.normal.map,  //3.0
          {
              zoom: 16,
              center: this.center,
              pixelRatio: window.devicePixelRatio || 1
          }
      );
    }, 300);
  }

get memory leak, each time get two memory heaps leak :

enter image description here

Upvotes: 1

Views: 451

Answers (1)

Michel
Michel

Reputation: 28349

It is not surprising, given the fact that the Angular component lifecycle is destroyed when you navigate away from the view, and (re)created when you navigate to the view, while the HERE map objects reside on the global H object.

I think your Angular component should interface with OnDestroy and therefore implements the ngOnDestroy method. In that method, one should dispose the objects and handlers that have been "imposed" to the map. Typically, we need to dispose event handlers, then map objects, then the map itself. See for example the dispose method on H.Map API Reference.

Upvotes: 1

Related Questions