TomTom Maps SDK for JavaScript
TomTom Maps for JavaScript
    Preparing search index...

    Type Alias SummaryBubblesConfig

    The route summary bubbles: what they say, from which zoom they show and how they look.

    • Each route shown gets one bubble, or the ones SummaryBubblesConfig.routes picks, on its longest distinct section: the stretch no other route drives, so routes sharing most of their way keep their bubbles apart.
    • A route with no distinct section as long as 5% of it uses its whole length.
    • A bubble stays put when another route is selected or routes changes.
    • It reads the routes' sections.distinct, comparing the routes itself only when one lacks them. So show one response's routes, all of them: sections found against other routes can put a bubble on a road they share.
    • Unset colours follow the map: a theme's label halo and label colours (TomTomMap.mapColors) once one sets them, else white on a light style and dark grey on a dark one. The deselected routes' bubbles take a shade darker.
    const summaryBubbles: SummaryBubblesConfig = {
      routes: 'alternatives',
      fields: ['durationDifference', 'trafficDelay'],
      maxZoom: 13,
      color: '#1A2024',
    };
    type SummaryBubblesConfig = {
        color?: string;
        fields?: SummaryBubbleField[];
        label?: SummaryBubbleLabelConfig;
        maxZoom?: number;
        minZoom?: number;
        routes?: SummaryBubbleRoutes;
        visible?: boolean;
    }
    Index
    color? fields? label? maxZoom? minZoom? routes? visible?
    color?: string

    The colour of the selected route's bubble. The deselected routes' bubbles take a darker shade of it, and the text whichever of black and white reads on it.

    the map's labelHalo lightened, when a theme or the colors.labelHalo knob sets it; else white on a light style, dark grey on a dark one

    fields?: SummaryBubbleField[]

    What each bubble says, in order.

    The first field a route carries is written in bold and the ones after it follow, muted, so with durationDifference first the selected route leads with the next field. trafficDelay goes on its own line, wherever it is listed. A bubble with nothing to say is not drawn, so ['trafficDelay'] shows bubbles only on the routes with a delay, ['durationDifference'] only on the routes other than the selected one, and [] none.

    ['duration', 'distance', 'trafficDelay']

    label?: SummaryBubbleLabelConfig

    The bubbles' text.

    maxZoom?: number

    The zoom from which the bubbles stop being drawn, for bubbles that summarise the routes from afar and leave as you zoom in to inspect them.

    every zoom
    minZoom?: number

    The lowest zoom the bubbles are drawn at.

    every zoom
    routes?: SummaryBubbleRoutes

    Which routes get a bubble.

    'all'

    visible?: boolean

    Whether the route summary bubbles show on the map.

    true

    Settings
    Member Visibility

    On This Page
    Properties