multilayer markers dynamic update not working

[thilak52]

Hi, I am using Angular-maps multilayer markers to show different set of data for the same countries. But how ever the dynamic update of markers doesnot work when we use it with layers Array. Please see the stackblitz https://stackblitz.com/edit/bing-basic-map-with-data-bound-markers-memory-leak?file=src%2Fapp%2Fapp.component.ts. But it works fine with single layer of markers.! can u please tell where i am going wrong ?

app.component for multilayer Markers: `import {Component, NgModule, VERSION, OnDestroy} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' import {MapModule, MapAPILoader, MarkerTypeId, IMapOptions, IBox, IMarkerIconInfo, WindowRef, DocumentRef, MapServiceFactory, BingMapAPILoaderConfig, BingMapAPILoader, GoogleMapAPILoader, GoogleMapAPILoaderConfig, ILatLong } from 'angular-maps'; import { Subscription, interval } from 'rxjs'; import { startWith } from 'rxjs/operators';

@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class App implements OnDestroy { _markerTypeId = MarkerTypeId; _options: IMapOptions = { disableBirdseye: false, disableStreetside: false, navigationBarMode: 1, zoom: 6 };

_box: IBox = { maxLatitude: 32, maxLongitude: -92, minLatitude: 29, minLongitude: -98 };

private _iconInfo: IMarkerIconInfo = { markerType: MarkerTypeId.FontMarker, fontName: 'FontAwesome', fontSize: 24, color: 'red', markerOffsetRatio: { x: 0.5, y: 1 }, text: '\uF276' }

_markers: Array = new Array(); _markers1:Array = new Array(); private _layers: Array = new Array( { markers: this._markers, id: 0, visible: true }, { markers: this._markers1, id: 1, visible: true } ); private dataSubscription: Subscription; private dataSubscription1: Subscription;

constructor() { this._markers1.push({ latitude: 29.714994, longitude: -95.46244}) for(let i:number=0; i<20; i++){ this._markers.push({ latitude: 29.714994 + Math.random() - Math.random(), longitude: -95.46244 + Math.random() - Math.random()}); } for(let i:number=0; i<10; i++){ this._markers1.push({ latitude: 29.714994 + Math.random() - Math.random(), longitude: -95.46244 + Math.random() - Math.random()}); }

this.dataSubscription = interval(5000).pipe(startWith(0)).subscribe(() => {
  let temp = [];
  for(let i:number=0; i<20; i++){
    temp.push({ latitude: 26.714994 + Math.random() - Math.random(), longitude: -94.46244 + Math.random() - Math.random()});
  }
  this._markers = temp;
  console.log(this._markers,"markers")
})
this.dataSubscription = interval(3000).pipe(startWith(0)).subscribe(() => {
  let temp1 = [];
  for(let i:number=0; i<20; i++){
    temp1.push({ latitude: 24.714994 + Math.random() - Math.random(), longitude: -92.46244 + Math.random() - Math.random()});
  }
  this._markers1 = temp1;
  console.log(this._markers1,"markers1")
})

}

_click(index: number){ console.log(Marker ${index} says: hello world...); }

ngOnDestroy() { if(this.dataSubscription) { this.dataSubscription.unsubscribe(); } if(this.dataSubscription1) { this.dataSubscription1.unsubscribe(); } } } `

AppComponent.html : <div style="height: 600px"> <x-map #xmap [Options]="_options" [Box]="_box"> <x-map-layer *ngFor="let $l of _layers, let $layerIndex=index" [Visible]="$l.visible"> <x-map-marker *ngFor="let $m of $l.markers; let $markerIndex=index" [Latitude]="$m.latitude" [Longitude]="$m.longitude" [Title]="'Marker ' + $markerIndex.toString() + ' in Layer ' + $layerIndex" [IconInfo]="{ markerType: _markerTypeId.FontMarker, fontName: 'FontAwesome', fontSize: 24, color: $layerIndex == 0 ? 'red' : ( $layerIndex == 1 ? 'blue' : 'green') , markerOffsetRatio: { x: 0.5, y: 1 }, text: '\uF276' }"> <x-info-box [DisableAutoPan]="true" [Title]="'My InfoBox ' + $layerIndex + '.' + $markerIndex.toString()" [Description]="'Hi, this is the content of the <strong>info window</strong>.'"> <x-info-box-action [Label]="'Click Me'" (ActionClicked)="_click($layerIndex, $markerIndex)"></x-info-box-action> </x-info-box> </x-map-marker> </x-map-layer> </x-map> </div>