angular-maps (X-map) multilayer markers dynamic update

Question

Maps Bing-map(x-map) for multilayer representation of data on the map. The data for markers will be updated by a REST API call to the backend.

But when I update the data to my markers, the markers are not changing on the map.

How can I resolve this?

Below is the code for file component.ts:

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<ILatLong> = new Array<ILatLong>();
    _markers1: Array<ILatLong> = new Array<ILatLong>();
    private _layers: Array<any> = new Array<any>(
        { 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();
        }
    }
}

And this is my 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>

Answer 1

Since the markers are inside layers, we need to update the markers as below.

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._layers[0].markers = temp;
})

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._layers[1].markers = temp1;
})