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.
truck[axleCount] parameter of the Routing API).truck[shippedHazardousGoods] parameter of the Routing API).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 db20f0b..7060b28 100644 --- a/truck-routing-road-restrictions/demo.js +++ b/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,10 +63,14 @@ 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 + ); } /** @@ -57,31 +78,44 @@ 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 }); -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); @@ -89,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 - 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);