This is the documentation of version 1.0.0-rc.4. Go to the latest version, 1.0.0-rc.5.
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:

      • 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, 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-summary',
    routeIndex: 0,
    routeState: 'selected',
    formattedDistance: '15 km',
    formattedDuration: '22 min',
    formattedTraffic: '5 min',
    magnitudeOfDelay: 'moderate'
    };