Merge branch 'b3none-patch-1'

Author: Oleksii Markhovskyi

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

@@ -1,43 +1,43 @@
-
 /**
  * Calculates and displays a car route from the Brandenburg Gate in the centre of Berlin
  * to Friedrichstraße Railway Station.
  *
  * 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
+ * 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
+ * @param {H.service.Platform} platform A stub class to access HERE services
  */
-function calculateRouteFromAtoB (platform) {
+function calculateRouteFromAtoB(platform) {
   var router = platform.getRoutingService(null, 8),
       routeRequestParams = {
         routingMode: 'fast',
         transportMode: 'car',
         origin: '52.5160,13.3779', // Brandenburg Gate
-        destination: '52.5206,13.3862',  // Friedrichstraße Railway Station
+        destination: '52.5206,13.3862', // Friedrichstraße Railway Station
         return: 'polyline,turnByTurnActions,actions,instructions,travelSummary'
       };
 
-
   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
+ * @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.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:
-  */
+
+  /*
+   * The styling of the route response on the map is entirely under the developer's control.
+   * A representative styling can be found the full JS + HTML code of this example
+   * in the functions below:
+   */
   addRouteShapeToMap(route);
   addManueversToMap(route);
   addWaypointsToPanel(route);
@@ -48,7 +48,7 @@ function onSuccess(result) {
 
 /**
  * This function will be called if a communication error occurs during the JSON-P request
- * @param  {Object} error  The error message received.
+ * @param {Object} error The error message received.
  */
 function onError(error) {
   alert('Can\'t reach the remote server');
@@ -58,29 +58,30 @@ function onError(error) {
  * Boilerplate map initialization code starts below:
  */
 
-// set up containers for the map  + panel
+// set up containers for the map + panel
 var mapContainer = document.getElementById('map'),
   routeInstructionsContainer = document.getElementById('panel');
 
-//Step 1: initialize communication with the platform
+// 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({
   apikey: window.apikey
 });
 
 var defaultLayers = platform.createDefaultLayers();
 
-//Step 2: initialize a map - this map is centered over Berlin
+// Step 2: initialize a map - this map is centered over Berlin
 var map = new H.Map(mapContainer,
-  defaultLayers.vector.normal.map,{
-  center: {lat:52.5160, lng:13.3779},
+  defaultLayers.vector.normal.map, {
+  center: {lat: 52.5160, lng: 13.3779},
   zoom: 13,
   pixelRatio: window.devicePixelRatio || 1
 });
+
 // add a resize listener to make sure that the map occupies the whole container
 window.addEventListener('resize', () => map.getViewPort().resize());
 
-//Step 3: make the map interactive
+// 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));
@@ -93,12 +94,12 @@ var bubble;
 
 /**
  * Opens/Closes a infobubble
- * @param  {H.geo.Point} position     The location on the map.
- * @param  {String} text              The contents of the infobubble.
+ * @param {H.geo.Point} position The location on the map.
+ * @param {String} text          The contents of the infobubble.
  */
-function openBubble(position, text){
- if(!bubble){
-    bubble =  new H.ui.InfoBubble(
+function openBubble(position, text) {
+  if (!bubble) {
+    bubble = new H.ui.InfoBubble(
       position,
       // The FO property holds the province name.
       {content: text});
@@ -110,12 +111,11 @@ function openBubble(position, text){
   }
 }
 
-
 /**
  * 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(route){
+function addRouteShapeToMap(route) {
   route.sections.forEach((section) => {
     // decode LineString from the flexible polyline
     let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
@@ -137,29 +137,29 @@ function addRouteShapeToMap(route){
   });
 }
 
-
 /**
  * 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
+ * @param {Object} route A route as received from the H.service.RoutingService
  */
-function addManueversToMap(route){
+function addManueversToMap(route) {
   var svgMarkup = '<svg width="18" height="18" ' +
     'xmlns="http://www.w3.org/2000/svg">' +
     '<circle cx="8" cy="8" r="8" ' +
-      'fill="#1b468d" stroke="white" stroke-width="1"  />' +
+      'fill="#1b468d" stroke="white" stroke-width="1" />' +
     '</svg>',
     dotIcon = new H.map.Icon(svgMarkup, {anchor: {x:8, y:8}}),
-    group = new  H.map.Group(),
+    group = new H.map.Group(),
     i,
     j;
+
   route.sections.forEach((section) => {
     let poly = H.geo.LineString.fromFlexiblePolyline(section.polyline).getLatLngAltArray();
 
     let actions = section.actions;
     // Add a marker for each maneuver
-    for (i = 0;  i < actions.length; i += 1) {
+    for (i = 0; i < actions.length; i += 1) {
       let action = actions[i];
-      var marker =  new H.map.Marker({
+      var marker = new H.map.Marker({
         lat: poly[action.offset * 3],
         lng: poly[action.offset * 3 + 1]},
         {icon: dotIcon});
@@ -169,67 +169,63 @@ function addManueversToMap(route){
 
     group.addEventListener('tap', function (evt) {
       map.setCenter(evt.target.getGeometry());
-      openBubble(
-         evt.target.getGeometry(), evt.target.instruction);
+      openBubble(evt.target.getGeometry(), evt.target.instruction);
     }, false);
 
     // 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
+ * @param {Object} route A route as received from the H.service.RoutingService
  */
 function addWaypointsToPanel(route) {
   var nodeH3 = document.createElement('h3'),
-      labels = [];
+    labels = [];
 
   route.sections.forEach((section) => {
     labels.push(
       section.turnByTurnActions[0].nextRoad.name[0].value)
     labels.push(
       section.turnByTurnActions[section.turnByTurnActions.length - 1].currentRoad.name[0].value)
   });
-  
+
   nodeH3.textContent = labels.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
+ * @param {Object} route A route as received from the H.service.RoutingService
  */
-function addSummaryToPanel(route){
+function addSummaryToPanel(route) {
   let duration = 0,
-      distance = 0;
+    distance = 0;
 
   route.sections.forEach((section) => {
     distance += section.travelSummary.length;
     duration += section.travelSummary.duration;
   });
 
   var summaryDiv = document.createElement('div'),
-   content = '';
-   content += '<b>Total distance</b>: ' + distance  + 'm. <br/>';
-   content += '<b>Travel Time</b>: ' + duration.toMMSS() + ' (in current traffic)';
-
+    content = '<b>Total distance</b>: ' + distance + 'm. <br />' +
+      '<b>Travel Time</b>: ' + toMMSS(duration) + ' (in current traffic)';
 
   summaryDiv.style.fontSize = 'small';
-  summaryDiv.style.marginLeft ='5%';
-  summaryDiv.style.marginRight ='5%';
+  summaryDiv.style.marginLeft = '5%';
+  summaryDiv.style.marginRight = '5%';
   summaryDiv.innerHTML = content;
   routeInstructionsContainer.appendChild(summaryDiv);
 }
 
 /**
  * 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
+ * @param {Object} route A route as received from the H.service.RoutingService
  */
-function addManueversToPanel(route){
+function addManueversToPanel(route) {
   var nodeOL = document.createElement('ol');
 
   nodeOL.style.fontSize = 'small';
@@ -240,8 +236,8 @@ function addManueversToPanel(route){
   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 ' + (action.direction || '') + action.action;
       spanInstruction.innerHTML = section.actions[idx].instruction;
@@ -255,10 +251,9 @@ function addManueversToPanel(route){
   routeInstructionsContainer.appendChild(nodeOL);
 }
 
-
-Number.prototype.toMMSS = function () {
-  return  Math.floor(this / 60)  +' minutes '+ (this % 60)  + ' seconds.';
+function toMMSS(duration) {
+  return Math.floor(duration / 60) + ' minutes ' + (duration % 60) + ' seconds.';
 }
 
 // Now use the map as required...
-calculateRouteFromAtoB (platform);
+calculateRouteFromAtoB(platform);