From 4bff45288517fde84bcbb6e4baed2fdad117c1ad Mon Sep 17 00:00:00 2001 From: regeter <2320305+regeter@users.noreply.github.com> Date: Mon, 17 Feb 2025 19:21:09 -0800 Subject: [PATCH] feat: Update Maps to use new TripObjects and draw pickup and dropoff markers --- src/Map.js | 93 ++++++------------------------------------ src/TrafficPolyline.js | 5 --- src/Trip.js | 33 +++++++++++++++ 3 files changed, 46 insertions(+), 85 deletions(-) diff --git a/src/Map.js b/src/Map.js index d153c23..0c1b79d 100644 --- a/src/Map.js +++ b/src/Map.js @@ -8,11 +8,11 @@ import Utils, { log } from "./Utils"; import PolylineCreation from "./PolylineCreation"; import { decode } from "s2polyline-ts"; import TrafficPolyline from "./TrafficPolyline"; +import { TripObjects } from "./TripObjects"; +import { getColor } from "./Trip"; let minDate; let maxDate; -let allPaths = []; -let allMarkers = []; let map; let apikey; let mapId; @@ -24,7 +24,6 @@ let panorama; let jwt; let projectId; let locationProvider; -let solutionType; let tripLogs; let taskLogs; let setFeaturedObject; @@ -37,62 +36,24 @@ const render = (status) => { }; function addTripPolys(map) { - _.forEach(allPaths, (p) => p.setMap(null)); - allPaths = []; - _.forEach(allMarkers, (m) => m.setMap(null)); - allMarkers = []; - + const tripObjects = new TripObjects({ + map, + setFeaturedObject, + setTimeRange, + }); const trips = tripLogs.getTrips(); const vehicleBounds = new window.google.maps.LatLngBounds(); - let lastVehicleCoords; + _.forEach(trips, (trip) => { + tripObjects.addTripVisuals(trip, minDate, maxDate); + + // Update bounds const tripCoords = trip.getPathCoords(minDate, maxDate); if (tripCoords.length > 0) { - lastVehicleCoords = _.last(tripCoords); - const path = new window.google.maps.Polyline({ - path: tripCoords, - geodesic: true, - strokeColor: getColor(trip.tripIdx), - strokeOpacity: 0.5, - strokeWeight: 6, - }); - google.maps.event.addListener(path, "mouseover", () => { - path.setOptions({ - strokeOpacity: 1, - strokeWeight: 8, - }); - }); - google.maps.event.addListener(path, "mouseout", () => { - path.setOptions({ - strokeOpacity: 0.5, - strokeWeight: 6, - }); - }); - google.maps.event.addListener(path, "click", () => { - const fd = trip.getFeaturedData(); - setFeaturedObject(fd); - // TODO: https://github.com/googlemaps/fleet-debugger/issues/79 - // this time range won't capture the createTrip logs - setTimeRange(fd.firstUpdate.getTime(), fd.lastUpdate.getTime()); - }); - getPolyBounds(vehicleBounds, path); - path.setMap(map); - allPaths.push(path); + tripCoords.forEach((coord) => vehicleBounds.extend(coord)); } }); - if (lastVehicleCoords) { - const urlBase = "http://maps.google.com/mapfiles/kml/shapes/"; - const lastVehicleLocMark = new window.google.maps.Marker({ - position: lastVehicleCoords, - map: map, - icon: { - url: urlBase + (solutionType === "LMFS" ? "truck.png" : "cabs.png"), - scaledSize: new google.maps.Size(18, 18), - }, - title: "Last Location", - }); - allMarkers.push(lastVehicleLocMark); - } + return vehicleBounds; } @@ -204,11 +165,6 @@ function MyMapComponent(props) { _.get(props.selectedRow, "lastlocation.currentroutesegment"); if (routeSegment) { - log("Processing new route segment polyline:", { - rowTimestamp: props.selectedRow.timestamp, - polyline: routeSegment, - }); - try { const decodedPoints = decode(routeSegment); @@ -218,12 +174,6 @@ function MyMapComponent(props) { lng: point.lngDegrees(), })); - log("Creating new polyline with", { - points: validWaypoints.length, - firstPoint: validWaypoints[0], - lastPoint: validWaypoints[validWaypoints.length - 1], - }); - const trafficRendering = _.get(props.selectedRow, "request.vehicle.currentroutesegmenttraffic.trafficrendering") || _.get(props.selectedRow, "lastlocation.currentroutesegmenttraffic.trafficrendering"); @@ -389,22 +339,6 @@ function MyMapComponent(props) { ); } -function getPolyBounds(bounds, p) { - p.getPath().forEach((e) => { - bounds.extend(e); - }); - return bounds; -} - -/* - * Deterministically assign a color per trip using tripIdx - * Colors were chosen for visibility - */ -function getColor(tripIdx) { - const colors = ["#2d7dd2", "#97cc04", "#eeb902", "#f45d01", "#474647", "00aa00"]; - return colors[tripIdx % colors.length]; -} - function Map(props) { tripLogs = props.logData.tripLogs; taskLogs = props.logData.taskLogs; @@ -415,7 +349,6 @@ function Map(props) { mapId = urlParams.get("mapId") || props.logData.mapId; jwt = props.logData.jwt; projectId = props.logData.projectId; - solutionType = props.logData.solutionType; setFeaturedObject = props.setFeaturedObject; setTimeRange = props.setTimeRange; diff --git a/src/TrafficPolyline.js b/src/TrafficPolyline.js index d06037b..75d57ae 100644 --- a/src/TrafficPolyline.js +++ b/src/TrafficPolyline.js @@ -57,11 +57,6 @@ export class TrafficPolyline { }, ...(trafficRendering.roadstretch || []), ]; - - log("Added traveled route segment:", { - lengthMeters: distanceInMeters, - segments: trafficRendering.roadstretch.length, - }); } } catch (error) { log("Error calculating traveled route segment:", error); diff --git a/src/Trip.js b/src/Trip.js index ba73ba4..8fe3d88 100644 --- a/src/Trip.js +++ b/src/Trip.js @@ -71,5 +71,38 @@ class Trip { getPlannedPath() { return this.plannedPath; } + + getPoint(type, path) { + return _.get( + _.find(this.logs, (log) => log["@type"] === type && _.get(log, path)), + path + ); + } + + getPickupPoint() { + return this.getPoint("createTrip", "request.trip.pickuppoint.point"); + } + + getDropoffPoint() { + return this.getPoint("createTrip", "request.trip.dropoffpoint.point"); + } + + getActualPickupPoint() { + return this.getPoint("updateTrip", "response.actualpickuppoint.point"); + } + + getActualDropoffPoint() { + return this.getPoint("updateTrip", "response.actualdropoffpoint.point"); + } } + +/* + * Deterministically assign a color per trip using tripIdx + * Colors were chosen for visibility + */ +export function getColor(tripIdx) { + const colors = ["#2d7dd2", "#97cc04", "#eeb902", "#f45d01", "#474647", "00aa00"]; + return colors[tripIdx % colors.length]; +} + export { Trip as default };