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) && (
+
+ )
}
>