Skip to main content
APIs 3 min read

Driving EV to US National Parks with HERE Routing API

LA to National Parks

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.  

national parks dropdown

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

        routeRequestParams = {
      ..... // other routing parameters
      'destination': destination,
      .... // other EV routing parameters

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. 

ev charging stops

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

        function addManueversToPanel(route) {
  var nodeOL = document.createElement('ol'); = 'small'; ='5%'; ='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;


      //charging stops details
      if (idx == theArray.length-1 && sid < theSArray.length - 1) {
        spanInstruction.innerHTML = "<b>Location:</b> " + + ". <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 + "%, ";


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, for more information please check out this guide on changing map types.  

        // Step 2: initialize a map - this map is centered over Ridgecrest
var map = new H.Map(mapContainer,,{ 
  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.    

Erwin Soekianto

Erwin Soekianto

Developer Evangelist

Have your say

Sign up for our newsletter

Why sign up:

  • Latest offers and discounts
  • Tailored content delivered weekly
  • Exclusive events
  • One click to unsubscribe