From 3fae6cae9d68704745dfd738afa96a04f3ec7d92 Mon Sep 17 00:00:00 2001 From: vedha gnanam Date: Wed, 28 May 2025 15:04:35 +0530 Subject: [PATCH 1/3] 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/3] 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/3] 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" }, + ]); + } } /**