diff --git a/packages/transit-vehicle-overlay/src/VehicleTooltip.tsx b/packages/transit-vehicle-overlay/src/VehicleTooltip.tsx index e11090365..3d2093f48 100644 --- a/packages/transit-vehicle-overlay/src/VehicleTooltip.tsx +++ b/packages/transit-vehicle-overlay/src/VehicleTooltip.tsx @@ -14,11 +14,13 @@ const Title = styled.span` export default function VehicleTooltip({ vehicle }: VehicleComponentProps): JSX.Element { - const { routeShortName, routeType, seconds } = vehicle; + const { routeShortName, routeLongName, routeType, seconds } = vehicle; - let name: JSX.Element = <>{routeShortName}; + const routeName = routeShortName || routeLongName; + + let name: JSX.Element = <>{routeName}; // This condition avoids processing long route names such as "Portland Streetcar". - if (routeShortName?.length <= 5) { + if (routeName?.length <= 5) { // This produces text such as "MAX Green", "BUS 157", // or "Line A" if no routeType is provided. name = ( @@ -29,7 +31,7 @@ export default function VehicleTooltip({ description="Formats a route title" id="otpUi.TransitVehicleOverlay.routeTitle" values={{ - name: routeShortName, + name: routeName, type: routeType || ( + (vehicle.routeShortName || vehicle.routeLongName) && ( + + ) } >