Map with Route from A to B using Public Transport

Request a route from A to B using public transport and display it on the map.

HTML

<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

<!-- BODY -->
<h1>Map with Route from A to B using Public Transport</h1>
<p>This example calculates a route from the <b>Fernsehturm</b> at Panoramastraße in Berlin (<i>52.5208°N, 13.4093°E</i>) to <b>Kurfürstendamm</b> (<i>52.5034°N, 13.3295°E</i>) in the west of the city using public transport routing, and displays it on the map. The calculation finds the fastest available route using public transport.</p>
<hr/>
<div id="map" style="width: 600px; height: 300px; background: grey;" ></div>
<hr/>
<div id="panel" style="width: 600px; "></div>

CSS

.directions li span.arrow {
  display:inline-block;
  min-width:28px;
  min-height:28px;
  background-position:0px;
  background-image: url("https://raw.githubusercontent.com/heremaps/jsfiddle-github/master/map-with-route-from-a-to-b-using-public-transport/img/arrows.png");
  position:relative;
  top:8px;
}
.directions li span.depart  {
  background-position:-28px;
}
.directions li span.rightUTurn  {
  background-position:-56px;
}
.directions li span.leftUTurn  {
  background-position:-84px;
}
.directions li span.rightFork  {
  background-position:-112px;
}
.directions li span.leftFork  {
  background-position:-140px;
}
.directions li span.rightMerge  {
  background-position:-112px;
}
.directions li span.leftMerge  {
  background-position:-140px;
}
.directions li span.slightRightTurn  {
  background-position:-168px;
}
.directions li span.slightLeftTurn{
  background-position:-196px;
}
.directions li span.rightTurn  {
  background-position:-224px;
}
.directions li span.leftTurn{
  background-position:-252px;
}
.directions li span.sharpRightTurn  {
  background-position:-280px;
}
.directions li span.sharpLeftTurn{
  background-position:-308px;
}
.directions li span.rightRoundaboutExit1 {
  background-position:-616px;
}
.directions li span.rightRoundaboutExit2 {
  background-position:-644px;
}

.directions li span.rightRoundaboutExit3 {
  background-position:-672px;
}

.directions li span.rightRoundaboutExit4 {
  background-position:-700px;
}

.directions li span.rightRoundaboutPass {
  background-position:-700px;
}

.directions li span.rightRoundaboutExit5 {
  background-position:-728px;
}
.directions li span.rightRoundaboutExit6 {
  background-position:-756px;
}
.directions li span.rightRoundaboutExit7 {
  background-position:-784px;
}
.directions li span.rightRoundaboutExit8 {
  background-position:-812px;
}
.directions li span.rightRoundaboutExit9 {
  background-position:-840px;
}
.directions li span.rightRoundaboutExit10 {
 ...

JavaScript

/**
 * * Calculates and displays a public trasnsport route from the Fernsehturm in Berlin
 * to Kurfürstendamm in the west of the city
 *
 * A full list of available request parameters can be found in the Routing API documentation.
 * see:  http://developer.here.com/rest-apis/documentation/routing/topics/resource-calculate-route.html
 *
 * @param   {H.service.Platform} platform    A stub class to access HERE services
 */
function calculateRouteFromAtoB (platform) {
  var router = platform.getRoutingService(),
    routeRequestParams = {
      mode: 'fastest;publicTransport',
      representation: 'display',
      waypoint0: '52.5208,13.4093', // Fernsehturm
      waypoint1: '52.5034,13.3280',  // Kurfürstendamm
      routeattributes: 'waypoints,summary,shape,legs',
      maneuverattributes: 'direction,action'
    };


  router.calculateRoute(
    routeRequestParams,
    onSuccess,
    onError
  );
}
/**
 * This function will be called once the Routing REST API provides a response
 * @param  {Object} result          A JSONP object representing the calculated route
 *
 * see: http://developer.here.com/rest-apis/documentation/routing/topics/resource-type-calculate-route.html
 */
function onSuccess(result) {
  var route = result.response.route[0];
 /*
  * The styling of the route response on the map is entirely under the developer's control.
  * A representitive styling can be found the full JS + HTML code of this example
  * in the functions below:
  */
  addRouteShapeToMap(route);
  addManueversToMap(route);

  addWaypointsToPanel(route.waypoint);
  addManueversToPanel(route);
  addSummaryToPanel(route.summary);
  // ... etc.
}

/**
 * This function will be called if a communication error occurs during the JSON-P request
 * @param  {Object} error  The error message received.
 */
function onError(error) {
  alert('Ooops!');
}




/**
 * Boilerplate map initialization code starts below:
 */

// set up containers for the map  + panel
var mapContainer =...