Driving EV to US National Parks with HERE Routing API

A couple of weeks ago, we posted a blog showing how to build a simple sample showing EV routing features of the HERE Routing API using HERE Maps API for Javascript. In this blog post, we are going to cover some UI improvements we made to the sample and to show how to change parameters to the HERE Routing API.

We added two dropdowns in the UI to allow the user to change the destination and the initial EV battery charge level at the start of the trip. To demonstrate this, we set the origin to Los Angeles, and the destination to be a list of several National Parks on the West Coast of the USA where people like going on road trips, but still afraid to take their EV cars. Changing the initial EV battery charge level would also show the capability of the EV routing features to make adjustments to the route and/or charging stop details.

These two inputs from dropdowns are going to be added to the routing parameters: destination, and ev[initialCharge], as shown below:

Copied

        routeRequestParams = {
      ..... // other routing parameters
      'destination': destination,
      .... // other EV routing parameters
      'ev[makeReachable]':'true',
      'ev[initialCharge]':initialCharge,
      ....
};

We also rearranged the route result panel to show the route summary first, removed the turn-by-turn driving directions, and only showed the details of the charging stops.

This is how we removed the turn-by-turn driving instruction (see the commented section), and only show the charging stops details.

Copied

        function addManueversToPanel(route) {
  var nodeOL = document.createElement('ol');

  nodeOL.style.fontSize = 'small';
  nodeOL.style.marginLeft ='5%';
  nodeOL.style.marginRight ='5%';
  nodeOL.className = 'directions';

  route.sections.forEach((section, sid, theSArray) => {
    section.actions.forEach((action, idx, theArray) => {
      var li = document.createElement('li'),
        spanArrow = document.createElement('span'),
        spanInstruction = document.createElement('span');
      
      //removing turn-by-turn driving directions
      //spanArrow.className = 'arrow ' + (action.direction || '') + action.action;
      //spanInstruction.innerHTML = section.actions[idx].instruction;
      //li.appendChild(spanArrow);
      //li.appendChild(spanInstruction);

      //nodeOL.appendChild(li);

      //charging stops details
      if (idx == theArray.length-1 && sid < theSArray.length - 1) {
        spanInstruction.innerHTML = "<b>Location:</b> " + section.arrival.place.name + ". <br>";
        spanArrow.className = 'arrow ' + section.postActions[1].action;
        spanInstruction.innerHTML += "<b>Details:</b> " + " " 
      + "Arrival Charge: " + (section.postActions[1].arrivalCharge).toFixed(1) + "%, " 
      + "Consumable Power: " + section.postActions[1].consumablePower + ", " 
      + "Duration: " + toMMSS(section.postActions[1].duration) + ", " 
      + "Target Charge: " + section.postActions[1].targetCharge + "%, ";
      li.appendChild(spanArrow);
      li.appendChild(spanInstruction);

      nodeOL.appendChild(li);
      }      
    });
  });

And lastly, we also changed the map style to show a terrain map using HERE Tile Map API, which provides map images in a large choice of styles. In this case, we are using raster.terrain.map, for more information please check out this guide on changing map types.

Copied

        // Step 2: initialize a map - this map is centered over Ridgecrest
var map = new H.Map(mapContainer,
  defaultLayers.raster.terrain.map,{ 
  center: {lat:35.633862, lng:-117.679367}, //ridgecrest
  zoom: 7,
  pixelRatio: window.devicePixelRatio || 1
});

This is the result of the app.

That is all for part 2, we hope you find this useful and give this a try. If you are interested in trying this sample, here is the source code of this sample and the code changes from the part 1 sample. Stay tuned for the next part as we continue to add more functionalities to this application.