Map with the truck routes from A to B and road restrictions

Show a various truck routes with the truck related road restrictions highlighted on the map

HTML

<script src="https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Map with the truck routes and road restrictions</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js'></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
  </head>
  <body id="markers-on-the-map">

    <div class="page-header">
        <h1>Map with the truck routes and road restrictions</h1>
        <p>Show a truck routes with the truck related road restrictions highlighted on the map</p>
    </div>
    <p>This example calculates and displays 3 different truck routes with the same start and end positions,
      but different truck attributes.
      <br>
    The start position is in <b>Manhattan</b> and the end position on the opposite bank in <b>Newport</b>.
    <p>
      <ul>
        <li>The blue route is a simple truck route (without specifying any truck attributes).</li>
        <li>The fuchsia route shows that a truck with four axles and one trailer transporting flammable goods should take a much longer detour
          (uses...

CSS

#map {
    width: 95%;
    height: 450px;
    background: grey;
}

#panel {
    width: 100%;
    height: auto !important;
    font-weight: bold;
}

JavaScript

/**
 * A full list of available request parameters can be found in the Routing API documentation.
 * see: https://www.here.com/docs/bundle/routing-api-v8-api-reference/page/index.html#tag/Routing/operation/calculateRoutes
 */
var routeRequestParams = {
  routingMode: "fast",
  transportMode: "truck",
  origin: "40.7249546323,-74.0110042", // Manhattan
  destination: "40.7324386599,-74.0341396", // Newport
  return: "polyline",
  units: "imperial",
  spans: "truckAttributes",
},
  routes = new H.map.Group();

function calculateRoutes(platform) {
  var router = platform.getRoutingService();

  // The blue route showing a simple truck route
  calculateRoute(router, routeRequestParams, {
    strokeColor: "rgba(0, 128, 255, 0.7)",
    lineWidth: 10
  });

  // The fuchsia route showing a truck route to transport flammable hazardous goods
  // with 4 axles and a trailer.
  calculateRoute(
    router,
    Object.assign({}, routeRequestParams, {
      "vehicle[axleCount]": 4,
      "vehicle[trailerCount]": 1,
      "vehicle[hazardousGoods]": "flammable"
    }),
    {
      strokeColor: "rgba(255, 0, 255, 0.7)",
      lineWidth: 10
    }
  );
}

// Event handler used to enable vehicle restrictions on style load.
function enableVehicleRestrictions(event) {
  // Check the style state.
  if (event.target.getState() === H.map.render.Style.State.READY) {
    // Remove the attached event listener.
    event.target.removeEventListener(
      "change",
      enableVehicleRestrictions,
      false
    );
    var features = event.target.getEnabledFeatures();
    // Enable vehicle restrictions feature in "active & inactive" mode.
    event.target.setEnabledFeatures([
      ...features,
      { feature: "vehicle restrictions", mode: "active & inactive" },
    ]);
  }
}

/**
 * Calculates and displays a route.
 * @param {Object} params The Routing API request parameters
 * @param {H.service.RoutingService} router The service stub for requesting the Routing API
 * @param...