Using @angular/google-maps to create a real time map of public transport using transport for NSW openData.
- https://github.com/angular/components/blob/main/src/google-maps/README.md
- https://opendata.transport.nsw.gov.au/
I can successfully create the initial map, and put markers onto the map (in this example ferry locations) but updating the array of markers does not update the marker positions on the map.
It DOES, however, update data in the view when I output to text via an *ngFor loop in the component.
My question: how to update the marker positions in the Angular Google Map when the array of markers updates?
Angular 15 code:
livedata-map-content.component.html
<div class="live-transport-map">
<div *ngIf="apiLoaded" class="google-maps-container">
<google-map width="100%" height="100%" [options]="options">
<map-marker *ngFor="let marker of markers"
[position]="marker.position"
[label]="marker.label"
[title]="marker.title"
[options]="marker.options">
</map-marker>
<span *ngFor="let marker of markers">NAME: {{marker.title}} LAT: {{marker.position.lat}} LNG: {{marker.position.lng}}!!!! </span>
</google-map>
</div>
</div>
livedata-map-content.component.ts
import { ChangeDetectorRef, Component, AfterViewInit } from '@angular/core';
import { MapService} from '../../../services/map.service';
@Component({
selector: 'app-livedata-map-content',
templateUrl: './livedata-map-content.component.html',
styleUrls: ['./livedata-map-content.component.scss']
})
export class LivedataMapContentComponent implements AfterViewInit {
public apiLoaded: any = false;
public markers: Array<any> = [];
public period = 10000;
public iconStr = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
public options: google.maps.MapOptions = {
center: {lat: -33.853759, lng: 151.212803}, // Sydney Harbour center
zoom: 14,
};
constructor(
private mapService: MapService
) { }
ngAfterViewInit(): void {
// Load the maps API after view is init
this.mapService.loadGoogleMapsAPI().subscribe(data => {
this.apiLoaded = data;
if(this.apiLoaded === true) {
// Once it's loaded start getting live data
setInterval(this.updateMarkers, this.period);
}
});
// Initial marker setup on map
this.mapService.getLivePositionData('ferry').subscribe(positionData => {
let transportEntitiesArray = positionData.data.entity;
transportEntitiesArray.forEach((transportEntity: any) => {
this.markers.push({
tripId: transportEntity.vehicle.trip.tripId,
position: {
lat: transportEntity.vehicle.position.latitude,
lng: transportEntity.vehicle.position.longitude,
},
title: transportEntity.vehicle.vehicle.id + 'n' + transportEntity.vehicle.vehicle.label,
options: {
icon: this.iconStr,
}
});
});
this.cd.detectChanges();
});
}
updateMarkers = () => {
this.mapService.getLivePositionData('ferry').subscribe(positionData => {
positionData.data.entity.forEach(positionDataItem => {
this.markers.forEach(marker => {
// Only update markers with new positions
if(marker.tripId === positionDataItem.vehicle.trip.tripId && (marker.position.lat !== positionDataItem.vehicle.position.latitude || marker.position.lng !== positionDataItem.vehicle.position.longitude)){
marker.position.lat = positionDataItem.vehicle.position.latitude;
marker.position.lng = positionDataItem.vehicle.position.longitude;
}
});
});
this.cd.detectChanges();
});
}
}
map.service.ts
...
public loadGoogleMapsAPI = () => {
const mapsAPIURL = `https://maps.googleapis.com/maps/api/js?key=${environment.tempGoogleMapsID}`
console.log('mapsAPIURL ',mapsAPIURL);
return this.http.jsonp<any>(mapsAPIURL, 'callback').pipe(
map((data) => {
console.log('DATA ',data);
return true}),
catchError((error) => {
console.log('error ',error);
return of(false)}),
);
}
...
getLivePositionData = (transportMode: any) => {
const getLivePositionDataObject = {
transportMode: transportMode
}
const getLivePositionDataDataURL = this.openDataAPI + 'positiondata';
return this.http.post<any>(getLivePositionDataDataURL, getLivePositionDataObject);
}
...
This draws the map and populates the array as expected, but does not update marker positions on the map.
IMAGE: the Angular 15 Material Google Maps with ferry position markers working
