Merge pull request #101 from kplotnik/master

Updated markers with altitude example to the routing v8

Author: kplotnik

markers-with-altitude/demo.js

@@ -4,15 +4,13 @@
  * @param   {H.service.Platform} platform    A stub class to access HERE services
  */
 function calculateRouteFromAtoB (platform) {
-  var router = platform.getRoutingService(),
+  var router = platform.getRoutingService(null, 8),
       routeRequestParams = {
-        mode: 'fastest;bicycle',
-        representation: 'display',
-        routeattributes : 'shape',
-        waypoint0: '-16.1647142,-67.7229166',
-        waypoint1: '-16.3705847,-68.0452683',
-        // explicitly request altitude values
-        returnElevation: true
+        routingMode: 'fast',
+        transportMode: 'bicycle',
+        origin: '-16.1647142,-67.7229166',
+        destination: '-16.3705847,-68.0452683',
+        return: 'polyline,elevation' // explicitly request altitude data
       };
 
   router.calculateRoute(
@@ -27,60 +25,62 @@ function calculateRouteFromAtoB (platform) {
  * H.map.Marker
  */
 function onSuccess(result) {
-  var lineString = new H.geo.LineString(),
-    routeShape =  result.response.route[0].shape,
-    group = new H.map.Group(),
-    dict = {},
-    polyline;
-
-  routeShape.forEach(function(point) {
-    var parts = point.split(',');
-    lineString.pushLatLngAlt(parts[0], parts[1]);
-
-    // normalize the altitude values for the color range
-    var p = (parts[2] - 1000) / (4700 - 1000);
-    var r = Math.round(255 * p);
-    var b = Math.round(255 - 255 * p);
-
-    // create or re-use icon
-    var icon;
-    if (dict[r + '_' + b]) {
-      icon = dict[r + '_' + b];
-    } else {
-      var canvas = document.createElement('canvas');
-      canvas.width = 4;
-      canvas.height = 4;
-  
-      var ctx = canvas.getContext('2d'); 
-      ctx.fillStyle = 'rgb(' + r + ', 0, ' + b + ')';
-      ctx.fillRect(0, 0, 4, 4);
-      icon = new H.map.Icon(canvas);
-      // cache the icon for the future reuse
-      dict[r + '_' + b] = icon;
+  var route = result.routes[0];
+  route.sections.forEach((section) => {
+    let lineString = H.geo.LineString.fromFlexiblePolyline(section.polyline),
+        group = new H.map.Group(),
+        dict = {},
+        polyline;
+
+    let coords = lineString.getLatLngAltArray();
+
+    for (let i = 2, len = coords.length; i < len; i += 3) {
+      let elevation = coords[i];
+
+      // normalize the altitude values for the color range
+      var p = (elevation - 1000) / (4700 - 1000);
+      var r = Math.round(255 * p);
+      var b = Math.round(255 - 255 * p);
+
+      // create or re-use icon
+      var icon;
+      if (dict[r + '_' + b]) {
+        icon = dict[r + '_' + b];
+      } else {
+        var canvas = document.createElement('canvas');
+        canvas.width = 4;
+        canvas.height = 4;
+
+        var ctx = canvas.getContext('2d'); 
+        ctx.fillStyle = 'rgb(' + r + ', 0, ' + b + ')';
+        ctx.fillRect(0, 0, 4, 4);
+        icon = new H.map.Icon(canvas);
+        // cache the icon for the future reuse
+        dict[r + '_' + b] = icon;
+      }
+
+      // the marker is placed at the provided altitude
+      var marker = new H.map.Marker({
+        lat: coords[i - 2], lng: coords[i - 1], alt: elevation
+      }, {icon: icon});
+      group.addObject(marker);
     }
 
-    // the marker is placed at the provided altitude
-    var marker = new H.map.Marker({
-      lat: parts[0], lng: parts[1], alt: parts[2]
-    }, {icon: icon});
-    group.addObject(marker);
-  });
-
-  polyline = new H.map.Polyline(lineString, {
-    style: {
-      lineWidth: 2,
-      strokeColor: '#555555'
-    }
-  });
-
-  // Add the polyline to the map
-  map.addObject(polyline);
-  // Add markers to the map
-  map.addObject(group);
-  // Zoom to its bounding rectangle
-  map.getViewModel().setLookAtData({
-    bounds: polyline.getBoundingBox(),
-    tilt: 60
+    polyline = new H.map.Polyline(lineString, {
+      style: {
+        lineWidth: 2,
+        strokeColor: '#555555'
+      }
+    });
+    // Add the polyline to the map
+    map.addObject(polyline);
+    // Add markers to the map
+    map.addObject(group);
+    // Zoom to its bounding rectangle
+    map.getViewModel().setLookAtData({
+      bounds: polyline.getBoundingBox(),
+      tilt: 60
+    });
   });
 }