kikita & Maps

HEREMap.prototype.drawRoute = function (fromCoordinates, toCoordinates) {
    var routeOptions = {
        mode: 'fastest;car',
        representation: 'display',
        # add parameter
        alternatives: 2,
        waypoint0: Utils.locationToWaypointString(fromCoordinates),
        waypoint1: Utils.locationToWaypointString(toCoordinates)
    };
    this.routes = new HERERoute(this.map, this.platform, routeOptions);
};

// Add drawRoute Function to HERERoute
    var drawRoute = function (route) {
        var routeShape = route.shape;
        var LineString = new H.geo.LineString();

        routeShape.forEach(function (point) {
            var parts = point.split(',');
            LineString.pushLatLngAlt(parts[0], parts[1]);
        });
        var routeLine = new H.map.Polyline(LineString, {
            style: {
                strokeColor: 'blue',
                lineWidth: 3
            }
        });
        map.addObject(routeLine);
        // map.setViewBounds(routeLine.getBounds());
    };

var onSuccess = function (result) {
       // Simplify on success function
       if (result.response.route) {
           var routes = result.response.route;
           Setting view bounds
           routes.forEach(drawRoute);
       }
   };

var onSuccess = function (result) {
    if (result.response.route) {
        var routes = result.response.route;
        // Setting view bounds
        // routes.forEach(drawRoute);
        // add all routes to a group
        var routeLines = routes.map(drawRoute);
        var routeLineGroup = new H.map.Group({
            objects: routeLines
        });
        map.addObject(routeLineGroup);
        map.setViewBounds(routeLineGroup.getBounds());
    }
};

// Setting view bounds using Group bounds not the last route
// map.addObject(routeLine);
// map.setViewBounds(routeLine.getBounds());
return routeLine;

var platform = new H.service.Platform({
		app_id: '[YOUR APP ID HERE]',
		app_code: '[YOUR APP CODE HERE]'
});

var router = platform.getRoutingService();

// build a function to take the map and platform objects as parameters
function HERERoute (map, platform, routeOptions) {
// access the routing service by calling getRoutingService()
    var router = platform.getRoutingService();
// error handling    
    var onSuccess = function(result) {
      console.log('Route found!', result);
    };
    var onError = function(error) {
      console.error('Oh no! There was some communication error!', error);
    }
  
    router.calculateRoute(routeOptions, onSuccess, onError);
  }

var onSuccess = function (result) {
    
        // Option_1 Simply put the response to the console log
        console.log('Route found!', result);

        // Option_2 Furtherly draw the response to the map
        var route,
            routeShape,
            startPoint,
            endPoint,
            lineString;

        if (result.response.route) {
            
            // Just take the first Route in the array
            route = result.response.route[0];
            routeShape = route.shape;

            // H.geo.LineString is recommended, instead of H.geo.Strip in the offical demo code
            lineString = new H.geo.LineString();
            routeShape.forEach(function (point) {
                var parts = point.split(',');
                lineString.pushLatLngAlt(parts[0], parts[1]);
            });

            // Utilize H.map.Polyline to draw a blue line
            var routeLine = new H.map.Polyline(lineString, {
                style: {
                    strokeColor: 'blue',
                    lineWidth: 10
                }
            });
            map.addObject(routeLine);

            // update the map bounds to that of our route
            map.setViewBounds(routeLine.getBounds());
        }
    };

// a small helper which converts a location into a waypoint
function locationToWaypointString(coordinates) {
  return 'geo!' + coordinates.lat + ',' + coordinates.lng;
}

// set a flag called RouteRendered
// to ensure that the route is only rendered the first time
var routeRendered = false;

function updatePosition(event) {
  var coordinates = {
    lat: event.coords.latitude,
    lng: event.coords.longitude
  };

  var marker = new H.map.Marker(coordinates);
  map.addObject(marker);

  // If the route has not been rendered yet, 
  // calculate and render it
  if (!routeRendered) {
    var route = new HERERoute(map, platform, {
      mode: 'fastest;car',
      representation: 'display',
      waypoint0: locationToWaypointString(coordinates),
      waypoint1: locationToWaypointString(EndCoordinates)
    });
    routeRendered = true;
  }
}

// request the user's current location
navigator.geolocation.watchPosition(updatePosition);

navigator.geolocation.getCurrentPosition(success[, error[, options]]);

function updatePosition (event) {
  var coordinates = {
    lat: event.coords.latitude,
    lng: event.coords.longitude
  };
  var iconUrl = './images/icecream.svg';
  var iconOptions = {
    size: new H.math.Size(26, 34),
    anchor: new H.math.Point(14, 34)
  };
  var markerOptions = {
    icon: new H.map.Icon(iconUrl, iconOptions)
  };
   var marker = new H.map.Marker(coordinates, markerOptions);
  map.addObject(marker);
  map.setCenter(coordinates);
}
// Action
navigator.geolocation.watchPosition(updatePosition);

// Get Map Container Element
var mapContainer = document.getElementById('map-container');

// Specify the APPID & APPCODE
var platform = new H.service.Platform({
  app_id: 'oyNWTb---PMlrXxCH', // // <-- ENTER YOUR APP ID HERE
  app_code: '_W_7qfgp-----tQQKkbLA', // <-- ENTER YOUR APP CODE HERE
});

// ----------------------------------------------------------------------- 
// Displaying a Basic Map， Initialize Map Object
// Create Defaulr Layer
var defaultLayers = platform.createDefaultLayers();

// Adjust the Map Center and the Initial Zoom Level 
var coordinates = {
  lat: 52.530974, // HERE HQ in Berlin, Germany
  lng: 13.384944
};
var mapOptions = {
  center: coordinates,
  zoom: 14
}
var map = new H.Map(
  mapContainer,
  defaultLayers.normal.map,
  mapOptions);

// ----------------------------------------------------------------------- 
// Interacting with the map, at least move around and zoom in / out
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// -----------------------------------------------------------------------
// Adding Markers to the Map
var marker = new H.map.Marker(coordinates);

// Custom Icons for Markers
var iconUrl = './images/icecream.svg';

var iconOptions = {
	// The icon's size in pixel:
  size: new H.math.Size(26, 34),
	// The anchorage point in pixel, 
	// defaults to bottom-center
  anchor: new H.math.Point(14, 34)
};

var markerOptions = {
   icon: new H.map.Icon(iconUrl, iconOptions)
};

var marker = new H.map.Marker(coordinates, markerOptions);
map.addObject(marker);

// ----------------------------------------------------------------------- 
// Set Event Listener to Make Map React Properly
window.addEventListener('resize', function () {
  map.getViewPort().resize();
});