Merge pull request #91 from kplotnik/master

Changed routing example to use Routing v8

Author: kplotnik

map-with-pedestrian-route-from-a-to-b/demo.html

@@ -26,142 +26,15 @@
       .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  {
+      .directions li span.rightturn  {
         background-position:-224px;
       }
-      .directions li span.leftTurn{
+      .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 {
-        background-position:924px;
-      }
-      .directions li span.leftRoundaboutExit1  {
-        background-position:-952px;
-      }
-      .directions li span.leftRoundaboutExit2  {
-        background-position:-980px;
-      }
-      .directions li span.leftRoundaboutExit3  {
-        background-position:-1008px;
-      }
-      .directions li span.leftRoundaboutExit4  {
-        background-position:-1036px;
-      }
-      .directions li span.leftRoundaboutPass {
-        background-position:1036px;
-      }
-      .directions li span.leftRoundaboutExit5  {
-        background-position:-1064px;
-      }
-      .directions li span.leftRoundaboutExit6  {
-        background-position:-1092px;
-      }
-      .directions li span.leftRoundaboutExit7  {
-        background-position:-1120px;
-      }
-      .directions li span.leftRoundaboutExit8  {
-        background-position:-1148px;
-      }
-      .directions li span.leftRoundaboutExit9  {
-        background-position:-1176px;
-      }
-      .directions li span.leftRoundaboutExit10  {
-        background-position:-1204px;
-      }
-      .directions li span.leftRoundaboutExit11  {
-        background-position:-1232px;
-      }
-      .directions li span.leftRoundaboutExit12  {
-        background-position:-1260px;
-      }
       .directions li span.arrive  {
         background-position:-1288px;
       }
-      .directions li span.leftRamp  {
-        background-position:-392px;
-      }
-      .directions li span.rightRamp  {
-        background-position:-420px;
-      }
-      .directions li span.leftExit  {
-        background-position:-448px;
-      }
-      .directions li span.rightExit  {
-        background-position:-476px;
-      }
-      .directions li span.ferry  {
-        background-position:-1316px;
-      }
       </style>
   </head>
   <body id="markers-on-the-map">
@@ -179,7 +52,7 @@ <h3>Code</h3>
     <p>Access to the routing service is obtained from the <code>H.service.Platform</code> by calling 
       <code>getRoutingService()</code>. The <code>calculateRoute()</code> method is used to calculate the shortest  
       pedestrian (<code>mode:shortest;pedestrian</code>) route by passing in the relevant parameters as defined in 
-      <a href="http://developer.here.com/rest-apis/documentation/routing/topics/resource-calculate-route.html" target="_blank">Routing API</a>. 
+      <a href="https://developer.here.com/documentation/routing-api/dev_guide/topics/use-cases/calculate-route.html" target="_blank">Routing API</a>. 
       The styling and display of the response is under the control of the developer.</p>
     <script type="text/javascript" src='demo.js'></script>
   </body>

map-with-pedestrian-route-from-a-to-b/demo.js

@@ -8,15 +8,14 @@
  * @param   {H.service.Platform} platform    A stub class to access HERE services
  */
 function calculateRouteFromAtoB (platform) {
-  var router = platform.getRoutingService(),
-    routeRequestParams = {
-      mode: 'shortest;pedestrian',
-      representation: 'display',
-      waypoint0: '51.51326,-0.0968752', // St Paul's Cathedral
-      waypoint1: '51.5081,-0.0985',  // Tate Modern
-      routeattributes: 'waypoints,summary,shape,legs',
-      maneuverattributes: 'direction,action'
-    };
+  var router = platform.getRoutingService(null, 8),
+      routeRequestParams = {
+        routingMode: 'fast',
+        transportMode: 'pedestrian',
+        origin: '51.51326,-0.0968752', // St Paul's Cathedral
+        destination: '51.5081,-0.0985',  // Tate Modern
+        return: 'polyline,turnByTurnActions,actions,instructions,travelSummary'
+      };
 
 
   router.calculateRoute(
@@ -32,18 +31,16 @@ function calculateRouteFromAtoB (platform) {
  * see: http://developer.here.com/rest-apis/documentation/routing/topics/resource-type-calculate-route.html
  */
 function onSuccess(result) {
-  var route = result.response.route[0];
+  var route = result.routes[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);
+  addSummaryToPanel(route);
   // ... etc.
 }
 
@@ -116,26 +113,24 @@ function openBubble(position, text){
  * @param {Object} route A route as received from the H.service.RoutingService
  */
 function addRouteShapeToMap(route){
-  var lineString = new H.geo.LineString(),
-    routeShape = route.shape,
-    polyline;
-
-  routeShape.forEach(function(point) {
-    var parts = point.split(',');
-    lineString.pushLatLngAlt(parts[0], parts[1]);
-  });
-
-  polyline = new H.map.Polyline(lineString, {
-    style: {
-      lineWidth: 4,
-      strokeColor: 'rgba(0, 128, 255, 0.7)'
-    }
-  });
-  // Add the polyline to the map
-  map.addObject(polyline);
-  // And zoom to its bounding rectangle
-  map.getViewModel().setLookAtData({
-    bounds: polyline.getBoundingBox()
+  route.sections.forEach((section) => {
+    // decode LineString from the flexible polyline
+    let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
+
+    // Create a polyline to display the route:
+    let polyline = new H.map.Polyline(linestring, {
+      style: {
+        lineWidth: 4,
+        strokeColor: 'rgba(0, 128, 255, 0.7)'
+      }
+    });
+
+    // Add the polyline to the map
+    map.addObject(polyline);
+    // And zoom to its bounding rectangle
+    map.getViewModel().setLookAtData({
+      bounds: polyline.getBoundingBox()
+    });
   });
 }
 
@@ -154,65 +149,50 @@ function addManueversToMap(route){
     group = new  H.map.Group(),
     i,
     j;
+  route.sections.forEach((section) => {
+    let poly = H.geo.LineString.fromFlexiblePolyline(section.polyline).getLatLngAltArray();
 
-  // Add a marker for each maneuver
-  for (i = 0;  i < route.leg.length; i += 1) {
-    for (j = 0;  j < route.leg[i].maneuver.length; j += 1) {
-      // Get the next maneuver.
-      maneuver = route.leg[i].maneuver[j];
-      // Add a marker to the maneuvers group
+    let actions = section.actions;
+    // Add a marker for each maneuver
+    for (i = 0;  i < actions.length; i += 1) {
+      let action = actions[i];
       var marker =  new H.map.Marker({
-        lat: maneuver.position.latitude,
-        lng: maneuver.position.longitude} ,
+        lat: poly[action.offset * 3],
+        lng: poly[action.offset * 3 + 1]},
         {icon: dotIcon});
-      marker.instruction = maneuver.instruction;
+      marker.instruction = action.instruction;
       group.addObject(marker);
     }
-  }
 
-  group.addEventListener('tap', function (evt) {
-    map.setCenter(evt.target.getGeometry());
-    openBubble(
-       evt.target.getGeometry(), evt.target.instruction);
-  }, false);
+    group.addEventListener('tap', function (evt) {
+      map.setCenter(evt.target.getGeometry());
+      openBubble(
+         evt.target.getGeometry(), evt.target.instruction);
+    }, false);
 
-  // Add the maneuvers group to the map
-  map.addObject(group);
+    // Add the maneuvers group to the map
+    map.addObject(group);
+  });
 }
 
 
 /**
  * Creates a series of H.map.Marker points from the route and adds them to the map.
  * @param {Object} route  A route as received from the H.service.RoutingService
  */
-function addWaypointsToPanel(waypoints){
+function addSummaryToPanel(route){
+  let duration = 0,
+      distance = 0;
 
+  route.sections.forEach((section) => {
+    distance += section.travelSummary.length;
+    duration += section.travelSummary.duration;
+  });
 
-
-  var nodeH3 = document.createElement('h3'),
-    waypointLabels = [],
-    i;
-
-
-   for (i = 0;  i < waypoints.length; i += 1) {
-    waypointLabels.push(waypoints[i].label)
-   }
-
-   nodeH3.textContent = waypointLabels.join(' - ');
-
-  routeInstructionsContainer.innerHTML = '';
-  routeInstructionsContainer.appendChild(nodeH3);
-}
-
-/**
- * Creates a series of H.map.Marker points from the route and adds them to the map.
- * @param {Object} route  A route as received from the H.service.RoutingService
- */
-function addSummaryToPanel(summary){
   var summaryDiv = document.createElement('div'),
    content = '';
-   content += '<b>Total distance</b>: ' + summary.distance  + 'm. <br/>';
-   content += '<b>Travel Time</b>: ' + summary.travelTime.toMMSS() + ' (in current traffic)';
+   content += '<b>Total distance</b>: ' + distance  + 'm. <br/>';
+   content += '<b>Travel Time</b>: ' + duration.toMMSS();
 
 
   summaryDiv.style.fontSize = 'small';
@@ -227,36 +207,27 @@ function addSummaryToPanel(summary){
  * @param {Object} route  A route as received from the H.service.RoutingService
  */
 function addManueversToPanel(route){
-
-
-
-  var nodeOL = document.createElement('ol'),
-    i,
-    j;
+  var nodeOL = document.createElement('ol');
 
   nodeOL.style.fontSize = 'small';
   nodeOL.style.marginLeft ='5%';
   nodeOL.style.marginRight ='5%';
   nodeOL.className = 'directions';
 
-     // Add a marker for each maneuver
-  for (i = 0;  i < route.leg.length; i += 1) {
-    for (j = 0;  j < route.leg[i].maneuver.length; j += 1) {
-      // Get the next maneuver.
-      maneuver = route.leg[i].maneuver[j];
-
+  route.sections.forEach((section) => {
+    section.actions.forEach((action, idx) => {
       var li = document.createElement('li'),
-        spanArrow = document.createElement('span'),
-        spanInstruction = document.createElement('span');
+          spanArrow = document.createElement('span'),
+          spanInstruction = document.createElement('span');
 
-      spanArrow.className = 'arrow '  + maneuver.action;
-      spanInstruction.innerHTML = maneuver.instruction;
+      spanArrow.className = 'arrow ' + (action.direction || '') + action.action;
+      spanInstruction.innerHTML = section.actions[idx].instruction;
       li.appendChild(spanArrow);
       li.appendChild(spanInstruction);
 
       nodeOL.appendChild(li);
-    }
-  }
+    });
+  });
 
   routeInstructionsContainer.appendChild(nodeOL);
 }