Map with Truck Route from A to B
Request a truck route from A to B and display it on the map.
HTML
<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<!-- BODY -->
<h1>Map with Truck Route from A to B</h1>
<p>This example calculates a truck route from <b>Chicago O'Hare Airport</b> (<i>41.9798°N, 87.8801°W</i>) to the <b>I-290 Eisenhower Expressway</b> (<i>41.9043°N, 87.9216°W</i>) nearby, and displays it on the map. The calculation finds the fastest available route for a truck journey, but does not take traffic conditions into account.</p>
<hr/>
<div id="map" style="width: 600px; height: 300px; background: grey;" ></div>
<hr/>
<div id="panel" style="width: 600px; "></div>
CSS
.directions li span.arrow {
display:inline-block;
min-width:28px;
min-height:28px;
background-position:0px;
background-image: url("https://raw.githubusercontent.com/heremaps/jsfiddle-github/master/map-with-truck-route-from-a-to-b/img/arrows.png");
position:relative;
top:8px;
}
.directions li span.depart {
background-position:-28px;
}
.directions li span.rightUTurn {
background-position:-56px;
}
.directions li span.leftUTurn {
background-position:-84px;
}
.directions li span.rightFork {
background-position:-112px;
}
.directions li span.leftFork {
background-position:-140px;
}
.directions li span.rightMerge {
background-position:-112px;
}
.directions li span.leftMerge {
background-position:-140px;
}
.directions li span.slightRightTurn {
background-position:-168px;
}
.directions li span.slightLeftTurn{
background-position:-196px;
}
.directions li span.rightTurn {
background-position:-224px;
}
.directions li span.leftTurn{
background-position:-252px;
}
.directions li span.sharpRightTurn {
background-position:-280px;
}
.directions li span.sharpLeftTurn{
background-position:-308px;
}
.directions li span.rightRoundaboutExit1 {
background-position:-616px;
}
.directions li span.rightRoundaboutExit2 {
background-position:-644px;
}
.directions li span.rightRoundaboutExit3 {
background-position:-672px;
}
.directions li span.rightRoundaboutExit4 {
background-position:-700px;
}
.directions li span.rightRoundaboutPass {
background-position:-700px;
}
.directions li span.rightRoundaboutExit5 {
background-position:-728px;
}
.directions li span.rightRoundaboutExit6 {
background-position:-756px;
}
.directions li span.rightRoundaboutExit7 {
background-position:-784px;
}
.directions li span.rightRoundaboutExit8 {
background-position:-812px;
}
.directions li span.rightRoundaboutExit9 {
background-position:-840px;
}
.directions li span.rightRoundaboutExit10 {
background-position:-868px;
}
.directions li...
JavaScript
/**
* Calculates and displays a truck route from Chicago O'Hare Airport to
* the I-290 Eisenhower Expressway nearby.
*
* A full list of available request parameters can be found in the Routing API documentation.
* see: http://developer.here.com/rest-apis/documentation/enterprise-routing/topics/resource-calculate-route.html
*
* @param {H.service.Platform} platform A stub class to access HERE services
*/
function calculateRouteFromAtoB (platform) {
var router = platform.getEnterpriseRoutingService(),
routeRequestParams = {
mode: 'fastest;truck',
representation: 'display',
waypoint0: '41.9798,-87.8801', // Chicago O'Hare
waypoint1: '41.9043,-87.9216', // Eisenhower Expressway
instructionformat : 'html',
routeattributes: 'waypoints,summary,shape,legs',
maneuverattributes: 'direction,action',
jsonattributes:1
};
router.calculateRoute(
routeRequestParams,
onSuccess,
onError
);
}
/**
* This function will be called once the Routing REST API provides a response
* @param {Object} result A JSONP object representing the calculated route
*
* see: http://developer.here.com/rest-apis/documentation/routing/topics/resource-type-calculate-route.html
*/
function onSuccess(result) {
var route = result.response.route[0];
/*
* The styling of the route response on the map is entirely under the developer's control.
* A representitive styling can be found the full JS + HTML code of this example
* in the functions below:
*/
addRouteShapeToMap(route);
addManueversToMap(route);
addManueversToPanel(route);
addSummaryToPanel(route.summary);
// ... etc.
}
/**
* This function will be called if a communication error occurs during the JSON-P request
* @param {Object} error The error message received.
*/
function onError(error) {
alert('Ooops!');
}
/**
* Boilerplate map initialization code starts below:
*/
// set up containers for the map + panel
var...