From 3fae6cae9d68704745dfd738afa96a04f3ec7d92 Mon Sep 17 00:00:00 2001 From: vedha gnanam Date: Wed, 28 May 2025 15:04:35 +0530 Subject: [PATCH 1/4] WEBSDK-643: Update Example for truck-routing-road-restrictions --- truck-routing-road-restrictions/demo.html | 1 + truck-routing-road-restrictions/demo.js | 25 ++++++++++++++++++----- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/truck-routing-road-restrictions/demo.html b/truck-routing-road-restrictions/demo.html index e8f9903..07cb615 100644 --- a/truck-routing-road-restrictions/demo.html +++ b/truck-routing-road-restrictions/demo.html @@ -10,6 +10,7 @@ + diff --git a/truck-routing-road-restrictions/demo.js b/truck-routing-road-restrictions/demo.js index db20f0b..b7f63f1 100644 --- a/truck-routing-road-restrictions/demo.js +++ b/truck-routing-road-restrictions/demo.js @@ -65,20 +65,35 @@ var platform = new H.service.Platform({ apikey: window.apikey }); -var defaultLayers = platform.createDefaultLayers(); +// Step 2: specify engine type. In this example, we use HARP rendering engine. +// HARP engine is not the default engine, and it's not included in the mapsjs-core.js module. +// To use this engine, you need to include mapsjs-harp.js file to your HTML page +var engineType = H.Map.EngineType['HARP']; -// Step 2: initialize a map - this map is centered over Berlin +// Step 3: create default layers using engine type HARP. +var defaultLayers = platform.createDefaultLayers({engineType}); + +// Step 4: initialize a map using engine type HARP. var map = new H.Map(mapContainer, - // Set truck restriction layer as a base map - defaultLayers.vector.normal.truck,{ + defaultLayers.vector.normal.logistics, { + engineType, center: {lat: 40.745390, lng: -74.022917}, zoom: 13.2, pixelRatio: window.devicePixelRatio || 1 }); + +// Step 5: Enable the vehicle restrictions feature and set active and inactive mode. +// This will show truck restiction icons on the map. +setTimeout(() => { + map.getBaseLayer().getProvider().getStyle().setEnabledFeatures([ + {feature: "vehicle restrictions", mode: "active & inactive"} + ]); +}, 500); + // add a resize listener to make sure that the map occupies the whole container window.addEventListener('resize', () => map.getViewPort().resize()); -// Step 3: make the map interactive +// Step 6: 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)); From ad97d5c94c7701efcbb599f63157ce84c765e311 Mon Sep 17 00:00:00 2001 From: vedha gnanam Date: Tue, 3 Jun 2025 16:17:55 +0530 Subject: [PATCH 2/4] update comments and removed timeouts --- truck-routing-road-restrictions/demo.js | 62 ++++++++++++++----------- 1 file changed, 36 insertions(+), 26 deletions(-) diff --git a/truck-routing-road-restrictions/demo.js b/truck-routing-road-restrictions/demo.js index b7f63f1..7390ef3 100644 --- a/truck-routing-road-restrictions/demo.js +++ b/truck-routing-road-restrictions/demo.js @@ -2,7 +2,7 @@ * 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 = { +const routeRequestParams = { routingMode: 'fast', transportMode: 'truck', origin: '40.7249546323,-74.0110042', // Manhattan @@ -14,7 +14,7 @@ var routeRequestParams = { 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, { @@ -40,6 +40,16 @@ function calculateRoutes(platform) { }); } +// Helper function to enable vehicle restrictions. +function enableVehicleRestrictions(event){ + // Remove the attached event listener. + event.target.removeEventListener("change", enableVehicleRestrictions,false) + // Enable vehicle restrictions feature in active and inactive mode. + event.target.setEnabledFeatures([ + {feature: "vehicle restrictions", mode: "active & inactive"} + ]); +} + /** * Calculates and displays a route. * @param {Object} params The Routing API request parameters @@ -57,46 +67,47 @@ function calculateRoute (router, params, style) { */ // 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 }); -// Step 2: specify engine type. In this example, we use HARP rendering engine. -// HARP engine is not the default engine, and it's not included in the mapsjs-core.js module. -// To use this engine, you need to include mapsjs-harp.js file to your HTML page -var engineType = H.Map.EngineType['HARP']; +// 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 3: create default layers using engine type HARP. -var defaultLayers = platform.createDefaultLayers({engineType}); +// Step 3: Create default map layers using the HARP engine. +const defaultLayers = platform.createDefaultLayers({engineType}); -// Step 4: initialize a map using engine type HARP. -var map = new H.Map(mapContainer, +// Step 4: Initialize the map using the HARP engine. +const map = new H.Map(mapContainer, defaultLayers.vector.normal.logistics, { engineType, center: {lat: 40.745390, lng: -74.022917}, zoom: 13.2, pixelRatio: window.devicePixelRatio || 1 }); +const style = map.getBaseLayer().getProvider().getStyle() + +// Step 5: Enable vehicle restrictions on the map. +// This feature displays truck restriction icons (e.g., weight, height limits). +// You can toggle between active and inactive modes for visualization. +style.addEventListener("change", enableVehicleRestrictions); -// Step 5: Enable the vehicle restrictions feature and set active and inactive mode. -// This will show truck restiction icons on the map. -setTimeout(() => { - map.getBaseLayer().getProvider().getStyle().setEnabledFeatures([ - {feature: "vehicle restrictions", mode: "active & inactive"} - ]); -}, 500); // add a resize listener to make sure that the map occupies the whole container window.addEventListener('resize', () => map.getViewPort().resize()); -// Step 6: 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); @@ -107,10 +118,10 @@ map.addObject(routes); 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, { + const polyline = new H.map.Polyline(linestring, { style: style }); @@ -122,6 +133,5 @@ function addRouteShapeToMap(style, route){ }); }); } - // Now use the map as required... calculateRoutes (platform); From e7e3b74320b3ef85ece6331cf680036da9146db3 Mon Sep 17 00:00:00 2001 From: vedha gnanam Date: Wed, 4 Jun 2025 17:55:24 +0530 Subject: [PATCH 3/4] added check for style state and passed previous features --- truck-routing-road-restrictions/demo.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/truck-routing-road-restrictions/demo.js b/truck-routing-road-restrictions/demo.js index 7390ef3..96432b1 100644 --- a/truck-routing-road-restrictions/demo.js +++ b/truck-routing-road-restrictions/demo.js @@ -41,13 +41,21 @@ function calculateRoutes(platform) { } // Helper function to enable vehicle restrictions. -function enableVehicleRestrictions(event){ - // Remove the attached event listener. - event.target.removeEventListener("change", enableVehicleRestrictions,false) - // Enable vehicle restrictions feature in active and inactive mode. - event.target.setEnabledFeatures([ - {feature: "vehicle restrictions", mode: "active & inactive"} - ]); +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 and inactive mode. + event.target.setEnabledFeatures([...features, + { feature: "vehicle restrictions", mode: "active & inactive" }, + ]); + } } /** From 5070723a412d5b6493ea275ffe9d09de630fecf1 Mon Sep 17 00:00:00 2001 From: Daniele Bacarella Date: Wed, 18 Jun 2025 15:27:10 +0200 Subject: [PATCH 4/4] Reduced # of routes from 3 to 2 + some minor fixes --- truck-routing-road-restrictions/demo.html | 10 +-- truck-routing-road-restrictions/demo.js | 97 ++++++++++++----------- 2 files changed, 53 insertions(+), 54 deletions(-) diff --git a/truck-routing-road-restrictions/demo.html b/truck-routing-road-restrictions/demo.html index 07cb615..241d21f 100644 --- a/truck-routing-road-restrictions/demo.html +++ b/truck-routing-road-restrictions/demo.html @@ -21,17 +21,15 @@

Map with the truck routes and road restrictions

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

-

This example calculates and displays 3 different truck routes with the same start and end positions, - but various truck attributes. +

This example calculates and displays 2 different truck routes with the same start and end positions, + but different truck attributes.
The start position is in Manhattan and the end position on the opposite bank in Newport.

  • The blue route is a simple truck route (without specifying any truck attributes).
    • -
  • The green route shows that a truck must use Lincoln Tunnel instead of Holland Tunnel - when it has four axles (uses the truck[axleCount] parameter of the Routing API).
    • -
  • The violet route shows that a truck with the four acles transporting flammable goods should take a much longer detour - (uses the truck[shippedHazardousGoods] parameter of the Routing API).
    • +
  • The fuchsia route shows that a truck with four axles and one trailer transporting flammable goods should take a much longer detour + (uses vehicle[axleCount], vehicle[trailerCount], vehicle[hazardousGoods] parameters of the Routing API).

More information about above mentioned routing request parameters can be found here.

diff --git a/truck-routing-road-restrictions/demo.js b/truck-routing-road-restrictions/demo.js index 96432b1..7060b28 100644 --- a/truck-routing-road-restrictions/demo.js +++ b/truck-routing-road-restrictions/demo.js @@ -3,44 +3,42 @@ * see: https://www.here.com/docs/bundle/routing-api-v8-api-reference/page/index.html#tag/Routing/operation/calculateRoutes */ const 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(); + 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) { 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 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 - }); + // 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 + } + ); } -// Helper function to enable vehicle restrictions. +// 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) { @@ -50,9 +48,10 @@ function enableVehicleRestrictions(event) { enableVehicleRestrictions, false ); - const features = event.target.getEnabledFeatures() - // Enable vehicle restrictions feature in active and inactive mode. - event.target.setEnabledFeatures([...features, + const features = event.target.getEnabledFeatures(); + // Enable vehicle restrictions feature in "active & inactive" mode. + event.target.setEnabledFeatures([ + ...features, { feature: "vehicle restrictions", mode: "active & inactive" }, ]); } @@ -64,10 +63,14 @@ function enableVehicleRestrictions(event) { * @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 + ); } /** @@ -75,7 +78,7 @@ function calculateRoute (router, params, style) { */ // set up containers for the map + panel -const 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 @@ -87,29 +90,26 @@ const platform = new H.service.Platform({ // 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']; +const engineType = H.Map.EngineType["HARP"]; // Step 3: Create default map layers using the HARP engine. -const defaultLayers = platform.createDefaultLayers({engineType}); +const defaultLayers = platform.createDefaultLayers({ engineType }); // Step 4: Initialize the map using the HARP engine. -const map = new H.Map(mapContainer, - defaultLayers.vector.normal.logistics, { +const map = new H.Map(mapContainer, defaultLayers.vector.normal.logistics, { engineType, - center: {lat: 40.745390, lng: -74.022917}, + center: { lat: 40.74539, lng: -74.022917 }, zoom: 13.2, pixelRatio: window.devicePixelRatio || 1 }); -const style = map.getBaseLayer().getProvider().getStyle() +const style = map.getBaseLayer().getProvider().getStyle(); -// Step 5: Enable vehicle restrictions on the map. -// This feature displays truck restriction icons (e.g., weight, height limits). -// You can toggle between active and inactive modes for visualization. +// 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 6: Enable map interactivity. // MapEvents enables the map's event system. @@ -123,14 +123,14 @@ 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 const linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline); // Create a polyline to display the route: const polyline = new H.map.Polyline(linestring, { - style: style + style }); // Add the polyline to the map @@ -141,5 +141,6 @@ function addRouteShapeToMap(style, route){ }); }); } + // Now use the map as required... -calculateRoutes (platform); +calculateRoutes(platform);