TomTom Maps for JavaScript
    Preparing search index...

    Type Alias DisplayRouteSummaryProps

    DisplayRouteSummaryProps: DisplayRouteRelatedProps & {
        formattedDistance?: string;
        formattedDuration?: string;
        formattedDurationDifference?: string;
        formattedTraffic?: string;
        magnitudeOfDelay?: DelayMagnitude;
        title?: string;
    } & SupportsEvents

    Display-ready properties for a route summary bubble.

    They hold pre-formatted strings to display route information in UI elements such as summary cards, tooltips or info bubbles.

    Type Declaration

    • OptionalformattedDistance?: string

      The route's distance, formatted in the chosen units.

      The SDK formats it from the display units configuration:

      • Metric: "15 km", "2.9 km" or "500 m"
      • Imperial (US): "9½ mi" or "600 ft"
      formattedDistance: '15 km'
      formattedDistance: '9½ mi'
    • OptionalformattedDuration?: string

      The route's formatted duration.

      Human-readable travel time with appropriate units:

      • Under half a minute: "< 1 min"
      • Short: "15 min"
      • Medium: "1 hr 30 min"
      • Long: "2 hr 15 min"

      It accounts for traffic if traffic data is enabled.

      formattedDuration: '22 min'
      formattedDuration: '1 hr 45 min'
    • OptionalformattedDurationDifference?: string

      How much longer or shorter the route takes than the selected one, formatted, such as +6 min or -3 min.

      Absent on the selected route, on every route while none is selected, and where both durations round to the same minute. It is the difference of the rounded durations, so it matches the durations the bubbles show.

    • OptionalformattedTraffic?: string

      The route's formatted traffic delay.

      It is the summary's trafficDelayInSeconds, the delay of the traffic events along the route. It is absent when that delay rounds to under a minute or the routing service did not send it.

      formattedTraffic: '5 min'
      formattedTraffic: '1 hr 15 min'
      formattedTraffic: undefined  // No delay
    • OptionalmagnitudeOfDelay?: DelayMagnitude

      The route's overall delay magnitude: the worst minor, moderate or major of its traffic sections.

      Absent when the route has no traffic section of a known magnitude, or carries no traffic sections at all. Use it to colour-code delays or show visual indicators in a UI.

      magnitudeOfDelay: 'moderate'
    • Optionaltitle?: string

      What a SummaryBubbleLabelConfig.title function returned for this route, which the bubble writes in place of its fields.

    Use cases:

    • Route comparison cards
    • Summary bubbles on the map
    • Route selection UI
    • Mobile route panels

    The SDK handles all formatting, units and duration format included, from the configured display settings.

    const summary: DisplayRouteSummaryProps = {
      id: 'route-0',
      routeIndex: 0,
      routeState: 'selected',
      formattedDistance: '15 km',
      formattedDuration: '22 min',
      formattedTraffic: '5 min',
      magnitudeOfDelay: 'moderate'
    };

    Settings
    Member Visibility