Map Point

by Rowan Hamilton

HTML

<link rel="stylesheet" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css">
<script src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<body>
  <div id="map" style="position:absolute; width:95%; height:95%; background:grey" ></div>
</body>

CSS

.directions li span.arrow {
  display:inline-block;
  min-width:28px;
  min-height:28px;
  background-position:0px;
  background-image: url("../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 span.rightRoundaboutExit11 {
  background-position:896px;
}
.directions li span.rightRoundaboutExit12 {
...

JavaScript

/**
 * A full list of available request parameters can be found in the Routing API documentation.
 * see:  http://developer.here.com/rest-apis/documentation/routing/topics/resource-calculate-route.html
 *
 * @param   {H.service.Platform} platform    A stub class to access HERE services
 */
 
 
function calculateRouteFromAtoB (platform) {
  var router = platform.getRoutingService(),
    routeRequestParams = {
      mode: 'fastest;car',
      representation: 'display',
      routeattributes : 'waypoints,summary,shape,legs',
      maneuverattributes: 'direction,action',
      waypoint0: '38.94967,-94.77172',
      waypoint1: '38.95154,-94.77215',
      waypoint2: '38.95282,-94.77233',
      waypoint3: '38.95282,-94.77233',
      waypoint4: '38.95282,-94.77233'
    };


  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);

  addWaypointsToPanel(route.waypoint);
  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 mapContainer = document.getElementById('map'),
  routeInstructionsContainer =...