TomTom Maps for JavaScript
    Preparing search index...

    Type Alias WaypointDisplayProps

    WaypointDisplayProps: Omit<PlaceDisplayProps, "id"> & {
        id: string | number;
        index: number;
        indexType: WaypointIndexType;
        stopDisplayIndex?: number;
        stopDisplayLabel?: string;
        stopDuration?: string;
    }

    Display properties for a waypoint marker on the map.

    They extend location display properties with waypoint-specific information, including route position and stop numbering.

    Type Declaration

    • id: string | number

      The waypoint's id: the one you gave it, a string or a number, otherwise a generated string.

      It identifies the waypoint in event handlers, UserEventsWithStates.setEventState and UserEventsWithStates.getEventStates, which return it as given.

    • index: number

      The waypoint's index among the other waypoints.

      It is zero-based, over 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 of the index, which describes where the waypoint sits in the list of waypoints.

      It sets the waypoint's role and look:

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

      It affects icon selection and labelling.

    • OptionalstopDisplayIndex?: number

      The stop index to display.

      Stops are the waypoints between origin and destination, numbered from 1. It is present only for middle waypoints. A null placeholder among them still counts, so the stops after it keep their numbers.

      Display behaviour:

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

      Use it to display stop numbers, such as "Stop 1" or "Stop 2", in the UI.

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

      The mark the stop's pin draws inside it, under WaypointsConfig.stopNumbering, such as '2' or 'B' for the second stop.

      Absent on the origin and destination, under 'none', and on a stop drawn with a middle.image or a mapped icon, none of which carries a mark.

    • 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, or one under 30 seconds, which rounds to no minutes.

      stopDuration: '30 min'

    Waypoints display differently by their position, each pin in the route colour unless configured:

    • Start: the origin pin, with its own glyph
    • Middle: a stop pin carrying its stop mark, a number from 1 or, under stopNumbering: 'letters', a letter from A
    • Finish: the destination pin, with its own glyph
    // Start waypoint
    const start: WaypointDisplayProps = {
      id: 'waypoint-0',
      iconID: 'waypointStart-0',
      index: 0,
      indexType: 'start',
      title: 'Amsterdam Central Station'
    };

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

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

    Settings
    Member Visibility