TomTom Maps for JavaScript
    Preparing search index...

    Type Alias RouteLayersConfig

    Detailed configuration for the visual appearance of route layers on the map with the MapLibre specification.

    Provides fine-grained control over all route visualization layers, including main route lines, waypoints, route sections (ferry, tunnel, toll roads, etc.), turn-by-turn guidance instructions, and route summaries.

    All fields are optional. When a field is not provided, the default styling will be used.

    type RouteLayersConfig = {
        chargingStops?: {
            routeChargingStopSymbol?: 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;
        sections?: {
            ferry?: {
                routeFerryLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeFerrySymbol?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >;
            } & HasAdditionalLayersConfig;
            incident?: {
                routeIncidentBackgroundLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeIncidentCauseSymbol?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >;
                routeIncidentDashedLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeIncidentJamSymbol?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >;
            } & HasAdditionalLayersConfig;
            tollRoad?: {
                routeTollRoadOutline?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeTollRoadSymbol?: Partial<
                    ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
                >;
            } & HasAdditionalLayersConfig;
            tunnel?: {
                routeTunnelLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
            } & HasAdditionalLayersConfig;
            vehicleRestricted?: {
                routeVehicleRestrictedBackgroundLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
                routeVehicleRestrictedForegroundLine?: Partial<
                    ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
                >;
            } & HasAdditionalLayersConfig;
        };
        summaryBubbles?: {
            routeSummaryBubbleSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        waypoints?: {
            routeWaypointLabel?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
            routeWaypointSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
    }
    Index

    Properties

    chargingStops? instructionArrows? instructionLines? mainLines? sections? summaryBubbles? waypoints?

    Properties

    chargingStops?: {
        routeChargingStopSymbol?: Partial<
            ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
        >;
    } & HasAdditionalLayersConfig

    Electric vehicle charging station section layers.

    Type Declaration

    • OptionalrouteChargingStopSymbol?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Symbol layer for rendering charging stop icons on the map.

      Use this layer to control icon image, size, and placement for charging stops.

    Marks charging stop locations along routes calculated for electric vehicles.

    Charging stops are individual points which are originally extracted from leg sections.

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

    Turn-by-turn instruction arrow layers.

    Type Declaration

    • OptionalrouteInstructionArrowSymbol?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Symbol layer for instruction/direction arrows placed along maneuver segments.

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

    Directional arrows indicating the direction of travel for each maneuver.

    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.

      Represents the precise geometry of the maneuver for which an instruction is shown.

    • OptionalrouteInstructionOutline?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Line layer for the outline around instruction segments.

      Used to make instruction segments readable over complex map backgrounds.

    Visual representation of individual maneuver segments in 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.

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

    • OptionalrouteDeselectedOutline?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Styling for the outline around the deselected route line.

      Matches routeDeselectedLine but provides an outer stroke for visibility.

    • OptionalrouteLine?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

      Styling for the primary, selected route line.

      Controls the visual appearance of the active route's line (color, width, dash pattern, etc.).

    • OptionalrouteLineArrows?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Symbol layer that renders directional arrows along the main route.

      Arrows can help indicate travel direction along routes with complex geometry.

    • OptionalrouteOutline?: Partial<ToBeAddedLayerSpecTemplate<LineLayerSpecification>>

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

      Typically used to create contrast between the route and map background.

    Defines the visual styling for the primary route path displayed on the map. Can include both line and symbol layers for enhanced visualization.

    sections?: {
        ferry?: {
            routeFerryLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeFerrySymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        incident?: {
            routeIncidentBackgroundLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeIncidentCauseSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
            routeIncidentDashedLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeIncidentJamSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        tollRoad?: {
            routeTollRoadOutline?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeTollRoadSymbol?: Partial<
                ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        tunnel?: {
            routeTunnelLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
        vehicleRestricted?: {
            routeVehicleRestrictedBackgroundLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
            routeVehicleRestrictedForegroundLine?: Partial<
                ToBeAddedLayerSpecTemplate<LineLayerSpecification>,
            >;
        } & HasAdditionalLayersConfig;
    }

    Layer specifications for specialized route sections.

    Type Declaration

    Each section is a subset of the route path.

    Different types of road sections along the route can be styled individually to highlight specific characteristics or conditions.

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

    Route summary information 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.

    Displays summary information (e.g., total distance, estimated time) for the route.

    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.

      Controls label text, font, and offset for waypoint annotations.

    • OptionalrouteWaypointSymbol?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

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

      Customize icons, sizes, and placement for waypoints using this layer.

    Controls the appearance of waypoint icons (origin, destination, and intermediate stops) and their labels along the route.

    Settings

    Member Visibility

    On This Page

    Properties