in Frontend/src/app/maps/bing-maps.service.ts [691:754]
private showDetailedTrip(trip: Trip) {
let colorIndex = 0;
let previousTripLeg: TripLeg;
for (const leg of trip.tripLegs) {
const tripLegLocations = [];
// Show the starting stop in a leg if its different from the ending stop of the last
if (!previousTripLeg || previousTripLeg.endLocation.id !== leg.startLocation.id) {
this.showTripLocation(leg.startLocation);
tripLegLocations.push(new Microsoft.Maps.Location(
leg.startLocation.latitude,
leg.startLocation.longitude
));
}
// Add all route points
for (let i = 0; i < leg.route.length; i++) {
tripLegLocations.push(new Microsoft.Maps.Location(
leg.route[i].latitude,
leg.route[i].longitude
));
}
// Show the ending stop in a leg
this.showTripLocation(leg.endLocation);
tripLegLocations.push(new Microsoft.Maps.Location(
leg.endLocation.latitude,
leg.endLocation.longitude
));
// Show every leg in a different color
const line = new Microsoft.Maps.Polyline(tripLegLocations, {
strokeThickness: 5,
strokeColor: this.tripColors[colorIndex++ % this.tripColors.length]
});
this.tripsLayer.add(line);
// Draw a dotted line between trip leg stop locations, if they are not the same.
if (previousTripLeg && previousTripLeg.endLocation.id !== leg.startLocation.id) {
const startPoint = new Microsoft.Maps.Location(
leg.startLocation.latitude,
leg.startLocation.longitude
);
const previousLocation = new Microsoft.Maps.Location(
previousTripLeg.endLocation.latitude,
previousTripLeg.endLocation.longitude);
const dottedLine = new Microsoft.Maps.Polyline(
[previousLocation, startPoint],
{
strokeThickness: 5,
strokeDashArray: [2, 2],
strokeColor: this.genericColors[4]
}
);
this.tripsLayer.add(dottedLine);
}
previousTripLeg = leg;
}
this.centerMap(trip.startLocation);
}