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

    Type Alias RouteLayersConfig

    Detailed configuration of the route layers' look on the map, in the MapLibre specification.

    It gives fine-grained control over every route layer, including main route lines, waypoints, route sections (ferry, tunnel, toll roads and others), turn-by-turn guidance instructions and route summaries.

    All fields are optional. A field you leave out uses the default styling.

    type RouteLayersConfig = {
        countryCrossings?: {
            routeCountryCrossing?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        instructionArrows?: {
            routeInstructionArrowSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        instructionLines?: {
            routeInstructionLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeInstructionOutline?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        mainLines?: {
            routeDeselectedLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeDeselectedOutline?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeLine?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>;
            routeLineArrows?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
            routeOutline?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>;
        } & HasAdditionalLayersConfig;
        sectionFocus?: {
            routeDeselectedSectionFocusOutline?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeSectionFocusOutline?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        sections?: {
            [T in Exclude<GeneratedSectionType, SectionTypeWithKnob<"sign">>]?: {
                [K in SectionLineLayerName<T>]?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >
            } & {
                [K in SectionSymbolLayerName<T>]?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >
            } & {
                [K in SectionKerbLayerName<Extract<T, SectionTypeWithKnob<"kerb">>>]?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >
            } & HasAdditionalLayersConfig
        } & {
            [T in Extract<GeneratedSectionType, SectionTypeWithKnob<"sign">>]?: {
                [K in SectionSignLayerName<T>]?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >
            } & HasAdditionalLayersConfig
        } & {
            ferry?: {
                routeFerryLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeFerrySymbol?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >;
            } & HasAdditionalLayersConfig;
            tollRoad?: {
                routeTollRoadOutline?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeTollRoadSymbol?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >;
            } & HasAdditionalLayersConfig;
            traffic?: {
                routeIncidentBackgroundLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeIncidentCauseSymbol?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >;
                routeIncidentDashedLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeIncidentJamSymbol?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >;
            } & HasAdditionalLayersConfig;
            tunnel?: {
                routeTunnelLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeTunnelSymbol?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >;
            } & HasAdditionalLayersConfig;
            vehicleRestricted?: {
                routeVehicleRestrictedBackgroundLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeVehicleRestrictedForegroundLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeVehicleRestrictedSymbol?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >;
            } & HasAdditionalLayersConfig;
        };
        summaryBubbles?: {
            routeSummaryBubbleSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        waypoints?: {
            routeWaypointLabel?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
            routeWaypointSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
    }
    Index
    countryCrossings? instructionArrows? instructionLines? mainLines? sectionFocus? sections? summaryBubbles? waypoints?
    countryCrossings?: {
        routeCountryCrossing?: Partial<
            ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
        >;
    } & HasAdditionalLayersConfig

    Border crossing layers.

    Type Declaration

    • OptionalrouteCountryCrossing?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Symbol layer writing each crossing's label in its bubble.

    Anything CountryCrossingConfig cannot express about the bubble or its label.

    instructionArrows?: {
        routeInstructionArrowSymbol?: Partial<
            ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
        >;
    } & HasAdditionalLayersConfig

    Turn-by-turn instruction arrow layers.

    Type Declaration

    • OptionalrouteInstructionArrowSymbol?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Symbol layer for the direction arrows placed along manoeuvre segments.

      It sets the arrow icon, rotation and placement relative to the instruction geometry.

    Arrows that show the direction of travel for each manoeuvre.

    instructionLines?: {
        routeInstructionLine?: Partial<
            ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
        >;
        routeInstructionOutline?: Partial<
            ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
        >;
    } & HasAdditionalLayersConfig

    Turn-by-turn instruction line layers.

    Type Declaration

    • OptionalrouteInstructionLine?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Line layer for the instruction segment itself.

      It follows the precise geometry of the manoeuvre the instruction is shown for.

    • OptionalrouteInstructionOutline?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Line layer for the outline around instruction segments.

      It keeps instruction segments readable over complex map backgrounds.

    They draw the individual manoeuvre segments of the guidance instructions.

    mainLines?: {
        routeDeselectedLine?: Partial<
            ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
        >;
        routeDeselectedOutline?: Partial<
            ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
        >;
        routeLine?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>;
        routeLineArrows?: Partial<
            ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
        >;
        routeOutline?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>;
    } & HasAdditionalLayersConfig

    Main route line layer specifications.

    Type Declaration

    • OptionalrouteDeselectedLine?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Styling for the deselected (inactive) route line.

      It applies when multiple routes are shown and some are visually de-emphasized.

    • OptionalrouteDeselectedOutline?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Styling for the outline around the deselected route line.

      It matches routeDeselectedLine and adds an outer stroke for visibility.

    • OptionalrouteLine?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Styling for the primary, selected route line.

      It sets the active route line's colour, width, dash pattern and more.

    • OptionalrouteLineArrows?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Symbol layer that draws directional arrows along the main route.

      They help show the travel direction on routes with complex geometry.

    • OptionalrouteOutline?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Styling for the outline (stroke) around the primary route line.

      It typically sets the route apart from the map background.

    They style the primary route path on the map, and can include both line and symbol layers.

    sectionFocus?: {
        routeDeselectedSectionFocusOutline?: Partial<
            ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
        >;
        routeSectionFocusOutline?: Partial<
            ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
        >;
    } & HasAdditionalLayersConfig

    Layers of the sections RoutingModule.setSectionFocus marks.

    Type Declaration

    • OptionalrouteDeselectedSectionFocusOutline?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Line layer ringing each focused section of a deselected route, under that route's own lines and so under the selected route where they cross.

    • OptionalrouteSectionFocusOutline?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Line layer ringing each focused section of the selected route, drawn with a line-gap-width as wide as the widest line along the route, so the route and its sections show through. It sits under the route's own lines, which cover it where the road doubles back and where focused sections meet.

    Anything RouteHighlightConfig section cannot express about the ring.

    sections?: {
        [T in Exclude<GeneratedSectionType, SectionTypeWithKnob<"sign">>]?: {
            [K in SectionLineLayerName<T>]?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >
        } & {
            [K in SectionSymbolLayerName<T>]?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >
        } & {
            [K in SectionKerbLayerName<Extract<T, SectionTypeWithKnob<"kerb">>>]?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >
        } & HasAdditionalLayersConfig
    } & {
        [T in Extract<GeneratedSectionType, SectionTypeWithKnob<"sign">>]?: {
            [K in SectionSignLayerName<T>]?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >
        } & HasAdditionalLayersConfig
    } & {
        ferry?: {
            routeFerryLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeFerrySymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        tollRoad?: {
            routeTollRoadOutline?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeTollRoadSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        traffic?: {
            routeIncidentBackgroundLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeIncidentCauseSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
            routeIncidentDashedLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeIncidentJamSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        tunnel?: {
            routeTunnelLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeTunnelSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        vehicleRestricted?: {
            routeVehicleRestrictedBackgroundLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeVehicleRestrictedForegroundLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeVehicleRestrictedSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
    }

    Layer specifications for route sections, keyed by section type.

    Type Declaration

    • Optionalferry?: {
          routeFerryLine?: Partial<
              ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
          >;
          routeFerrySymbol?: Partial<
              ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
          >;
      } & HasAdditionalLayersConfig

      Ferry crossing section layers.

      They style the route's ferry stretches.

    • OptionaltollRoad?: {
          routeTollRoadOutline?: Partial<
              ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
          >;
          routeTollRoadSymbol?: Partial<
              ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
          >;
      } & HasAdditionalLayersConfig

      Layers for the tollRoad section type.

      Marks the stretches of the route that cost money to drive, by any charging scheme: per-use tolls, motorways that need a vignette, and urban road-charge zones.

    • Optionaltraffic?: {
          routeIncidentBackgroundLine?: Partial<
              ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
          >;
          routeIncidentCauseSymbol?: Partial<
              ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
          >;
          routeIncidentDashedLine?: Partial<
              ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
          >;
          routeIncidentJamSymbol?: Partial<
              ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
          >;
      } & HasAdditionalLayersConfig

      Traffic incident section layers.

      They highlight route segments affected by traffic incidents or disruptions.

    • Optionaltunnel?: {
          routeTunnelLine?: Partial<
              ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
          >;
          routeTunnelSymbol?: Partial<
              ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
          >;
      } & HasAdditionalLayersConfig

      Tunnel section layers.

      They highlight route segments that pass through tunnels.

    • OptionalvehicleRestricted?: {
          routeVehicleRestrictedBackgroundLine?: Partial<
              ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
          >;
          routeVehicleRestrictedForegroundLine?: Partial<
              ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
          >;
          routeVehicleRestrictedSymbol?: Partial<
              ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
          >;
      } & HasAdditionalLayersConfig

      Vehicle-restricted section layers.

      Stretches the requested vehicle is not permitted to use, which the route still takes.

    Each section is a subset of the route path. Every type the module draws has an entry here, in the same vocabulary as the semantic sections config, one tier down. Use it when the knobs on sections are not enough and you need full MapLibre control over the layers a section is drawn with.

    The generated types that band the route carry a line layer, and an icon layer once sections.<type>.icon asks for one; curve adds the layer of the kerb it stripes its tight curves with, and speedLimit carries only its sign layer. The remaining five draw themselves with the hand-written layers documented below.

    summaryBubbles?: {
        routeSummaryBubbleSymbol?: Partial<
            ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
        >;
    } & HasAdditionalLayersConfig

    Route summary bubble layers.

    Type Declaration

    • OptionalrouteSummaryBubbleSymbol?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Symbol layer for the route summary bubble icon and label.

      Use this layer to style the small summary popups or badges shown on the route.

    They show summary information, such as total distance and estimated time.

    waypoints?: {
        routeWaypointLabel?: Partial<
            ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
        >;
        routeWaypointSymbol?: Partial<
            ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
        >;
    } & HasAdditionalLayersConfig

    Waypoint layer specifications.

    Type Declaration

    • OptionalrouteWaypointLabel?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Symbol layer for waypoint labels displayed next to waypoint icons.

      It sets the labels' text, font and offset.

    • OptionalrouteWaypointSymbol?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Symbol layer for waypoint icons (origin, destination, stops).

      Use it to customise the waypoints' icons, sizes and placement.

    They style the waypoint icons (origin, destination and intermediate stops) and their labels along the route.

    Settings
    Member Visibility

    On This Page
    Properties