Utilizing Bing Maps (x-map) for displaying data in multiple layers on the map. The markers' data will be updated through a REST API call to the backend.
I am facing an issue where the markers do not update on the map despite changing the data source. How can I troubleshoot this problem?
Below is the code snippet from the file component.ts:
import { Component, NgModule, VERSION, OnDestroy } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
// other imports...
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class App implements OnDestroy {
// component logic here...
}
This is the HTML snippet:
<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>