Switch truck-routing-road-restrictions example to use HARP (#173)

Co-authored-by: vedha gnanam <[email protected]>

Author: dbacarel

truck-routing-road-restrictions/demo.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" type="text/css" href="../template.css" />
     <script type="text/javascript" src='../test-credentials.js'></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-harp.js"></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
@@ -20,17 +21,15 @@
         <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 various truck attributes.
+    <p>This example calculates and displays 2 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 green route shows that a truck must use <b>Lincoln Tunnel</b> instead of <b>Holland Tunnel</b>
-        when it has four axles (uses the <code>truck[axleCount]</code> parameter of the Routing API).</li>
-        <li>The violet route shows that a truck with the four acles transporting flammable goods should take a much longer detour
-          (uses the <code>truck[shippedHazardousGoods]</code> parameter of the Routing API).</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 <code>vehicle[axleCount], vehicle[trailerCount], vehicle[hazardousGoods]</code> parameters of the Routing API).</li>
       </ul>
     </p>
     <p>More information about above mentioned routing request parameters can be found <a href="https://www.here.com/docs/bundle/routing-api-v8-api-reference/page/index.html#tag/Routing/operation/calculateRoutes" target="_blank">here</a>.</p>

truck-routing-road-restrictions/demo.js

@@ -2,42 +2,59 @@
  * 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,travelSummary',
-      units: 'imperial',
-      spans: 'truckAttributes'
-    },
-    routes = new H.map.Group();
+const 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(null, 8);
+  const router = platform.getRoutingService(null, 8);
 
   // The blue route showing a simple truck route
   calculateRoute(router, routeRequestParams, {
-    strokeColor: 'rgba(0, 128, 255, 0.7)',
+    strokeColor: "rgba(0, 128, 255, 0.7)",
     lineWidth: 10
   });
 
-  // The green route showing a truck route with a trailer
-  calculateRoute(router, Object.assign(routeRequestParams, {
-    'truck[axleCount]': 4,
-  }), {
-    strokeColor: 'rgba(25, 150, 10, 0.7)',
-    lineWidth: 7
-  });
+  // 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
+    }
+  );
+}
 
-  // The violet route showing a truck route with a trailer
-  calculateRoute(router, Object.assign(routeRequestParams, {
-    'truck[axleCount]': 5,
-    'truck[shippedHazardousGoods]': 'flammable'
-  }), {
-    strokeColor: 'rgba(255, 0, 255, 0.7)',
-    lineWidth: 5
-  });
+// 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
+    );
+    const features = event.target.getEnabledFeatures();
+    // Enable vehicle restrictions feature in "active & inactive" mode.
+    event.target.setEnabledFeatures([
+      ...features,
+      { feature: "vehicle restrictions", mode: "active & inactive" },
+    ]);
+  }
 }
 
 /**
@@ -46,57 +63,74 @@ function calculateRoutes(platform) {
  * @param {H.service.RoutingService} router The service stub for requesting the Routing API
  * @param {mapsjs.map.SpatialStyle.Options} style The style of the route to display on the map
  */
-function calculateRoute (router, params, style) {
-  router.calculateRoute(params, function(result) {
-    addRouteShapeToMap(style, result.routes[0]);
-  }, console.error);
+function calculateRoute(router, params, style) {
+  router.calculateRoute(
+    params,
+    function (result) {
+      addRouteShapeToMap(style, result.routes[0]);
+    },
+    console.error
+  );
 }
 
 /**
  * Boilerplate map initialization code starts below:
  */
 
 // set up containers for the map  + panel
-var mapContainer = document.getElementById('map');
+const mapContainer = document.getElementById("map");
 
 // Step 1: initialize communication with the platform
 // In your own code, replace variable window.apikey with your own apikey
-var platform = new H.service.Platform({
+const platform = new H.service.Platform({
   apikey: window.apikey
 });
 
-var defaultLayers = platform.createDefaultLayers();
+// Step 2: Specify the rendering engine.
+// In this example, we use the HARP rendering engine.
+// Note: HARP is not the default engine and is not included in mapsjs-core.js.
+// To use HARP, ensure you include the mapsjs-harp.js script in your HTML.
+const engineType = H.Map.EngineType["HARP"];
 
-// Step 2: initialize a map - this map is centered over Berlin
-var map = new H.Map(mapContainer,
-  // Set truck restriction layer as a base map
-  defaultLayers.vector.normal.truck,{
-  center: {lat: 40.745390, lng: -74.022917},
+// Step 3: Create default map layers using the HARP engine.
+const defaultLayers = platform.createDefaultLayers({ engineType });
+
+// Step 4: Initialize the map using the HARP engine.
+const map = new H.Map(mapContainer, defaultLayers.vector.normal.logistics, {
+  engineType,
+  center: { lat: 40.74539, lng: -74.022917 },
   zoom: 13.2,
   pixelRatio: window.devicePixelRatio || 1
 });
+const style = map.getBaseLayer().getProvider().getStyle();
+
+// Step 5: Enable vehicle restrictions display on the map.
+style.addEventListener("change", enableVehicleRestrictions);
+
+
 // add a resize listener to make sure that the map occupies the whole container
-window.addEventListener('resize', () => map.getViewPort().resize());
+window.addEventListener("resize", () => map.getViewPort().resize());
 
-// Step 3: make the map interactive
-// MapEvents enables the event system
-// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
-var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
+// Step 6: Enable map interactivity.
+// MapEvents enables the map's event system.
+// Behavior enables default user interactions such as pan and zoom,
+// including support for touch gestures on mobile devices.
+const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
 
 map.addObject(routes);
 
 /**
  * Creates a H.map.Polyline from the shape of the route and adds it to the map.
  * @param {Object} route A route as received from the H.service.RoutingService
  */
-function addRouteShapeToMap(style, route){
+function addRouteShapeToMap(style, route) {
   route.sections.forEach((section) => {
     // decode LineString from the flexible polyline
-    let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
+    const linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
 
     // Create a polyline to display the route:
-    let polyline = new H.map.Polyline(linestring, {
-      style: style
+    const polyline = new H.map.Polyline(linestring, {
+      style
     });
 
     // Add the polyline to the map
@@ -109,4 +143,4 @@ function addRouteShapeToMap(style, route){
 }
 
 // Now use the map as required...
-calculateRoutes (platform);
+calculateRoutes(platform);