TomTom Maps SDK for JavaScript
This is the documentation of version 1.0.0-rc.3. Go to the latest version, 1.0.0-rc.5.
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.

      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.

      stopDuration: '30 min'

    Waypoints display differently by 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: '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