TomTom Maps SDK for JavaScript
This is the documentation of version 1.0.0-rc.2. 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;
        formattedTraffic?: string;
        magnitudeOfDelay?: DelayMagnitude;
    }

    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.3 km" or "500 m"
      • Imperial: "9.5 mi" or "1,640 ft"
      formattedDistance: '15.3 km'
      formattedDistance: '9.5 mi'
    • OptionalformattedDuration?: string

      The route's formatted duration.

      Human-readable travel time with appropriate units:

      • Short: "15 min"
      • Medium: "1 h 30 min"
      • Long: "2 h 15 min"

      It accounts for traffic if traffic data is enabled.

      formattedDuration: '22 min'
      formattedDuration: '1 h 45 min'
    • OptionalformattedTraffic?: string

      The route's formatted traffic delay.

      The extra time that current traffic conditions add. It is present only when there is a delay and traffic data is available.

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

      The route's overall delay magnitude.

      Categorizes the severity of traffic delays:

      • minor: Small delays (typically < 5 minutes)
      • moderate: Noticeable delays (typically 5-15 minutes)
      • major: Significant delays (typically > 15 minutes)
      • undefined: No delay or no traffic data

      Use it to colour-code delays or show visual indicators in a UI.

      magnitudeOfDelay: 'moderate'

    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 = {
      routeIndex: 0,
      routeState: 'selected',
      formattedDistance: '15.3 km',
      formattedDuration: '22 min',
      formattedTraffic: '5 min delay',
      magnitudeOfDelay: 'moderate'
    };

    Settings
    Member Visibility