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.

    Contains pre-formatted strings for displaying route information in UI elements such as summary cards, tooltips, or info bubbles.

    Type Declaration

    • OptionalformattedDistance?: string

      Formatted distance of the route in the chosen units.

      Automatically formatted based on 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

      Formatted duration of the route.

      Human-readable travel time with appropriate units:

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

      Includes traffic considerations if traffic data is enabled.

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

      Formatted traffic delay of the route.

      Shows the additional time due to current traffic conditions. Only present when there is a delay and traffic data is available.

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

      Overall delay magnitude for the route.

      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

      Useful for color-coding or visual indicators in UI.

      magnitudeOfDelay: 'moderate'

    Use Cases:

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

    All formatting (units, duration format) is handled by the SDK based on 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