Formatting User Instructions with HTML and CSS
To customize the presentation for your users, you can use predefined CSS classes to format the HTML output of the routing instructions. To do this, set the instructionFormat request parameter to html, that augments maneuver instructions with HTML markup and associated CSS classes.
When this parameter is enabled for public transport routing, the service wraps instruction text in <span> tags for the following associated classes:
-
company: transit company name -
station: station name -
transit: transit type -
line: transit line name -
destination: line destination name -
distance-description: entire statement that describes the distance to proceed, for example, "follow for n stops" -
stops: number of stops or stations in "follow for" statement, for example, "n stops"
Public Transit Routing Instructions with HTML
Examples of HTML-wrapped output from the service, with associated classes are shown below.
For the
enter maneuver: Go to the <span class="company">U</span> station
<span class="station">U Pankstr. (Berlin)</span>
and take the <span class="transit">rail</span>
<span class="line">U8</span> towards
<span class="destination">S+U Hermannstr. (Berlin)</span>.
<span class="distance-description">
Follow for <span class="stops">1 station</span></span>. For the
change maneuver: At station <span class="station">S+U Gesundbrunnen Bhf (Berlin)
</span> change to the line
<span class="line">S1</line> towards
<span class="destination">S Wannsee Bhf (Berlin)</span>.
<span class="distance-description">Follow for
<span class="stops">1 stations</span></span>. For the
leave maneuver: Leave the line <span class="line">S1</span> at station
<span class="station">S+U Potsdamer Platz Bhf (Berlin)</span>
and leave the station