TomTom LogoDocs
Products
Resources
Pricing
Sign in
Maps SDK for JavaScript
Introduction
Guides
Examples
API Reference
All examples

Route Style Playground

Interactively explore and customize route styling using its color, width and waypoint size, and layer overrides.

View on GitHub
SDK 1.0.0-rc.7

Move a knob and the London to Paris route repaints in place, from its colour to a white dashed line along its centre, clicked or not.

  • RoutingModule.create takes the route and layer config up front, and applyConfig swaps it on the drawn route, so nothing is recalculated and a click setEventState put on it stays.
  • The top-level color and widthPreset, and waypoints.sizePreset, take a CSS colour and the RouteWidth and RouteWaypointSize presets, so a size stays one token rather than a zoom curve.
  • waypoints.label.color recolours the London and Paris labels. If you don’t set it, they follow the map’s light/dark theme like place labels do.
  • widthFactor, waypoints.sizeFactor and the clicked outline’s highlight.outline.widthFactor multiply what they size, and the sliders span the ranges the module clamps them to.
  • opacity fades the route lines and their outlines. Sections keep their own, so the opacity slider sets sections.tollRoad.opacity and sections.tunnel.opacity alongside it.
  • setSectionFocus rings the route’s toll roads, and highlight.section.outline sets the ring’s colour and width. If you don’t set the colour, it’s black on a light map and white on a dark one.
  • layers.mainLines.additional slots an extra MapLibre line into the route’s own stack, and SELECTED_ROUTE_FILTER confines it to the selected route.
  • setVisible hides the route and its pins and keeps them, so showing them again needs no new showRoutes.

Related examples