TomTom Maps for JavaScript
    Preparing search index...

    Type Alias WaypointDisplayProps

    WaypointDisplayProps: PlaceDisplayProps & {
        index: number;
        indexType: WaypointIndexType;
        stopDisplayIndex?: number;
        stopDuration?: string;
    }

    Display properties for a waypoint marker on the map.

    Extends location display properties with waypoint-specific information including position in the route and stop numbering.

    Type Declaration

    • index: number

      The index of the waypoint in relation to the other waypoints.

      Zero-based index of this waypoint in the complete waypoints array, including start, all stops, and finish.

      index: 0  // First waypoint (start)
      index: 1  // Second waypoint (first stop or finish)
      index: 2  // Third waypoint
    • indexType: WaypointIndexType

      The type associated to the index, describing how the waypoint sits in the list of waypoints.

      Determines the waypoint's role and visual representation:

      • start: Origin point
      • middle: Intermediate stop
      • finish: Final destination

      This affects icon selection and labeling behavior.

    • OptionalstopDisplayIndex?: number

      The stop index to be displayed.

      Stops are the waypoints between origin and destination, numbered starting from 1. Only present for middle waypoints.

      Display Behavior:

      • Start waypoint: undefined
      • First stop: 1
      • Second stop: 2
      • Finish waypoint: undefined

      Used for displaying stop numbers (e.g., "Stop 1", "Stop 2") in the UI.

      stopDisplayIndex: 1  // First intermediate stop
      stopDisplayIndex: 2  // Second intermediate stop
      stopDisplayIndex: undefined  // Start or finish waypoint
    • OptionalstopDuration?: string

      How long the route waits at this waypoint, formatted for display.

      Taken from WaypointProps.pauseDurationSeconds and rendered on the stop's label by default (e.g. 30 min). Absent when the waypoint carries no wait. Charging-stop pins carry the same property, so both kinds of pin say how long you are there in the same words.

      stopDuration: '30 min'

    Waypoints are displayed differently based on their position:

    • Start: Origin marker (often "A" or green pin)
    • Middle: Numbered stop markers (1, 2, 3, etc.)
    • Finish: Destination marker (often "B" or red pin)
    // Start waypoint
    const start: WaypointDisplayProps = {
      id: 'waypoint-0',
      iconID: 'waypoint-start',
      index: 0,
      indexType: 'start',
      title: 'Amsterdam Central Station'
    };

    // Intermediate stop
    const stop: WaypointDisplayProps = {
      id: 'waypoint-1',
      iconID: 'waypoint-stop',
      index: 1,
      indexType: 'middle',
      stopDisplayIndex: 1,
      title: 'Schiphol Airport'
    };

    // Destination
    const finish: WaypointDisplayProps = {
      id: 'waypoint-2',
      iconID: 'waypoint-finish',
      index: 2,
      indexType: 'finish',
      title: 'Rotterdam Central Station'
    };

    Settings
    Member Visibility