HERE Navigation Routing Dashboard

HERE Navigation Routing Dashboard

HERE Navigation Routing API Example on a Node-RED Dashboard

Use the HERE.com Routing APIs to build a map navigation dashboard and plot the route on a Node-RED Dashboard. Use the Watson Text to Speech service to narrate the route.

This example flow and Node-RED Dashboard might be useful as part of a Call for Code solution that uses HERE Technologies APIs. Natural disaster applications could guide someone to safety.

Prerequistes

Node-RED flow in this repository:

A flow that displays a Navigation Route on a map

HERE Navigation Dashboard

Get the Code: Node-RED flow for HERE Routing / Navigation

Severe Weather Alert flow

This flow has four sections:

  1. The Starting and Destination Locations / Geocode section displays a Node-RED Dashboard form which prompts the navigator to enter their starting location and ending destination. The flow then calls the HERE Geocode Search API to determine the latitude and longitude of the two waypoints.
  2. The Request Driving Navigation Instructions section calls the HERE Routing API to calculate the route between the two locations. It builds a table of these driving instructions and displays a summary of the route distance and driving duration.
  3. The Draw Map and Route section moves the car on the node-red-contrib-web-worldmap as the navigator clicks on the Navigation Preview button.
  4. The Read the Driving Instructions section determines if the mute slider is on / off and uses the Watson Text to Speech service to read the driving instructions aloud.

Authors

Enjoy! Give us feedback if you have suggestions on how to improve this tutorial.

License

This tutorial is licensed under the Apache Software License, Version 2. Separate third party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the Developer Certificate of Origin, Version 1.1 (DCO) and the Apache Software License, Version 2.

[{"id":"5d791586.3e74ec","type":"tab","label":"HERE","disabled":false,"info":""},{"id":"5fe44114.69f43","type":"group","z":"5d791586.3e74ec","name":"Read the Driving Instructions","style":{"stroke":"#ff0000","fill":"#ffefbf","label":true,"label-position":"n","color":"#000000"},"nodes":["4cfe56da.a4ed9","3b8e43f1.ccfe6c","9edb2ad8.67d3f8","68bea694.bb9578","19ebc49e.e6086b","a158422b.45f5","3df7ff6.195ba"],"x":154,"y":759,"w":792,"h":162},{"id":"9d04c384.31a5f8","type":"group","z":"5d791586.3e74ec","name":"Draw Map and Route","style":{"stroke":"#ff0000","fill":"#ffefbf","label":true,"label-position":"n","color":"#000000"},"nodes":["a4be59b5.7e187","1c6202eb.0c93c5","e571b112.bfcd5","a9d0e178.9f41a","c6fd4698.7a7c2","d0059822.8e925","eb334dfc.bbb0e8","b0473265.e44f5","cb5a2a47.9df6f8"],"x":134,"y":479,"w":832,"h":242},{"id":"ec1f8cef.a9393","type":"group","z":"5d791586.3e74ec","name":"Request Driving Navigation Instructions ","style":{"stroke":"#ff0000","fill":"#ffefbf","label":true,"label-position":"n","color":"#000000"},"nodes":["c84c5148.c72e58","d7c23344.391b28","d897340b.1527b8","dd563e.10d1f1c","650b3f82.d8328","cc270465.cb0b9","31d0f403.82b35c"],"x":174,"y":259,"w":772,"h":182},{"id":"fb1051cc.282ec8","type":"group","z":"5d791586.3e74ec","name":"Starting and Destination Locations / GeoCode","style":{"stroke":"#ff0000","fill":"#ffefbf","label":true,"label-position":"n","color":"#000000"},"nodes":["662b2752.5ccf68","74fd8dd.76cb5f4","8e6c9cb7.5b33d8","9cc4e692.e31a4","6a0d33cb.062c1c","f9e76c7c.173f3","600245db.edc68c","f8900792.a099d8","55fedec5.8ee618","91bd09cc.d091e"],"x":34,"y":19,"w":1092,"h":202},{"id":"662b2752.5ccf68","type":"http request","z":"5d791586.3e74ec","g":"fb1051cc.282ec8","name":"HERE Location Lookup","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://geocode.search.hereapi.com/v1/geocode?q={{start}}&apiKey={{hereapikey}}","tls":"","persist":false,"proxy":"","authType":"","x":550,"y":120,"wires":[["9cc4e692.e31a4"]]},{"id":"74fd8dd.76cb5f4","type":"change","z":"5d791586.3e74ec","g":"fb1051cc.282ec8","name":"","rules":[{"t":"set","p":"hereapikey","pt":"flow","to":"","tot":"str"},{"t":"set","p":"hereapikey","pt":"msg","to":"hereapikey","tot":"flow"},{"t":"delete","p":"current","pt":"flow"},{"t":"set","p":"start","pt":"msg","to":"payload.start","tot":"msg"},{"t":"set","p":"end","pt":"msg","to":"payload.end","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":120,"wires":[["662b2752.5ccf68"]]},{"id":"8e6c9cb7.5b33d8","type":"inject","z":"5d791586.3e74ec","g":"fb1051cc.282ec8","name":"Test","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":150,"y":180,"wires":[["74fd8dd.76cb5f4"]]},{"id":"9cc4e692.e31a4","type":"change","z":"5d791586.3e74ec","g":"fb1051cc.282ec8","name":"Save Start Location","rules":[{"t":"set","p":"startgeocode","pt":"msg","to":"payload.items[0].position.lat&\",\"&payload.items[0].position.lng","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":790,"y":120,"wires":[["6a0d33cb.062c1c","600245db.edc68c"]]},{"id":"6a0d33cb.062c1c","type":"debug","z":"5d791586.3e74ec","g":"fb1051cc.282ec8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1010,"y":120,"wires":[]},{"id":"f9e76c7c.173f3","type":"debug","z":"5d791586.3e74ec","g":"fb1051cc.282ec8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1010,"y":180,"wires":[]},{"id":"c84c5148.c72e58","type":"http request","z":"5d791586.3e74ec","g":"ec1f8cef.a9393","name":"HERE calculateroute API","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://route.ls.hereapi.com/routing/7.2/calculateroute.json?waypoint0=geo!{{startgeocode}}&waypoint1=geo!{{endgeocode}}&mode=fastest;car&apiKey={{hereapikey}}","tls":"","persist":false,"proxy":"","authType":"","x":310,"y":300,"wires":[["d7c23344.391b28","d897340b.1527b8","cc270465.cb0b9"]]},{"id":"d7c23344.391b28","type":"debug","z":"5d791586.3e74ec","g":"ec1f8cef.a9393","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":650,"y":340,"wires":[]},{"id":"600245db.edc68c","type":"http request","z":"5d791586.3e74ec","g":"fb1051cc.282ec8","name":"HERE Location Lookup","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://geocode.search.hereapi.com/v1/geocode?q={{end}}&apiKey={{hereapikey}}","tls":"","persist":false,"proxy":"","authType":"","x":530,"y":180,"wires":[["f8900792.a099d8"]]},{"id":"f8900792.a099d8","type":"change","z":"5d791586.3e74ec","g":"fb1051cc.282ec8","name":"Save End location","rules":[{"t":"set","p":"endgeocode","pt":"msg","to":"payload.items[0].position.lat&\",\"&payload.items[0].position.lng","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":790,"y":180,"wires":[["f9e76c7c.173f3","c84c5148.c72e58"]]},{"id":"a4be59b5.7e187","type":"ui_worldmap","z":"5d791586.3e74ec","g":"9d04c384.31a5f8","group":"9f8510b.9fe89f","order":0,"width":0,"height":0,"name":"","lat":"40.8770049","lon":"-74.0642452","zoom":"14","layer":"Esri","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"true","panlock":"false","zoomlock":"false","hiderightclick":"true","coords":"none","showgrid":"false","path":"/worldmap","x":840,"y":600,"wires":[]},{"id":"1c6202eb.0c93c5","type":"ui_button","z":"5d791586.3e74ec","g":"9d04c384.31a5f8","name":"","group":"b6bd120.a1623f","order":4,"width":0,"height":0,"passthru":false,"label":"Navigation Preview","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":250,"y":660,"wires":[["e571b112.bfcd5"]]},{"id":"d897340b.1527b8","type":"function","z":"5d791586.3e74ec","g":"ec1f8cef.a9393","name":"Build Table","func":"\nvar TableArray = [];\nfor( i=0; i < msg.payload.response.route[0].leg[0].maneuver.length; i++ ) {\n      var TableEntry = {};\n      // strip out HTML\n      TableEntry.instruction = msg.payload.response.route[0].leg[0].maneuver[i].instruction.replace(/<[^>]*>?/gm, '') ;\n      TableEntry.latitude = msg.payload.response.route[0].leg[0].maneuver[i].position.latitude ;\n      TableEntry.longitude = msg.payload.response.route[0].leg[0].maneuver[i].position.longitude ;\n      TableArray.push( TableEntry );\n}\nflow.set(\"Steps\",TableArray);\n\nmsg.payload = TableArray;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":410,"y":380,"wires":[["b0473265.e44f5","dd563e.10d1f1c","31d0f403.82b35c"]]},{"id":"e571b112.bfcd5","type":"function","z":"5d791586.3e74ec","g":"9d04c384.31a5f8","name":"Instructions","func":"var route = flow.get(\"Steps\") || [];\nvar step  = flow.get(\"current\") || 0;\nvar msg1 = {};\nmsg.payload = {};\n\nif( step < route.length ) {\n    msg.payload.name = \"route\";\n    msg.payload.layer = \"route\";\n    msg.payload.lat = route[step].latitude;\n    msg.payload.lon = route[step].longitude;\n    msg.payload.icon = \"fa-car\";\n    msg.payload.iconColor = \"maroon\"\n    msg1.instructions = route[step].instruction;\n    flow.set(\"current\", step+1 );\n} else {\n    msg1.instructions = \"You have arrived!\";\n    flow.set(\"current\", 0 );\n}\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":470,"y":640,"wires":[["a4be59b5.7e187","a9d0e178.9f41a","eb334dfc.bbb0e8"],["d0059822.8e925","9edb2ad8.67d3f8"]]},{"id":"dd563e.10d1f1c","type":"ui_table","z":"5d791586.3e74ec","g":"ec1f8cef.a9393","group":"af0661fa.136e4","name":"","order":0,"width":"10","height":"11","columns":[{"field":"instruction","title":"Driving Instructions","width":"60%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"latitude","title":"Latitude","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"longitude","title":"Longitude","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":830,"y":380,"wires":[]},{"id":"a9d0e178.9f41a","type":"debug","z":"5d791586.3e74ec","g":"9d04c384.31a5f8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":850,"y":660,"wires":[]},{"id":"c6fd4698.7a7c2","type":"inject","z":"5d791586.3e74ec","g":"9d04c384.31a5f8","name":"Test","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":290,"y":620,"wires":[["e571b112.bfcd5"]]},{"id":"d0059822.8e925","type":"ui_text","z":"5d791586.3e74ec","g":"9d04c384.31a5f8","group":"9f8510b.9fe89f","order":1,"width":0,"height":0,"name":"","label":"Instructions:","format":"{{msg.instructions}}","layout":"row-spread","x":670,"y":680,"wires":[]},{"id":"eb334dfc.bbb0e8","type":"worldmap-tracks","z":"5d791586.3e74ec","g":"9d04c384.31a5f8","name":"navigation","depth":"30","layer":"combined","x":670,"y":580,"wires":[["a4be59b5.7e187"]]},{"id":"55fedec5.8ee618","type":"ui_form","z":"5d791586.3e74ec","g":"fb1051cc.282ec8","name":"","label":"Get Directions","group":"b6bd120.a1623f","order":1,"width":0,"height":0,"options":[{"label":"Start Address:","value":"start","type":"text","required":true,"rows":null},{"label":"End Address","value":"end","type":"text","required":true,"rows":null}],"formValue":{"start":"","end":""},"payload":"","submit":"Get Route","cancel":"cancel","topic":"","x":140,"y":60,"wires":[["91bd09cc.d091e","74fd8dd.76cb5f4"]]},{"id":"91bd09cc.d091e","type":"debug","z":"5d791586.3e74ec","g":"fb1051cc.282ec8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":370,"y":60,"wires":[]},{"id":"650b3f82.d8328","type":"ui_text","z":"5d791586.3e74ec","g":"ec1f8cef.a9393","group":"b6bd120.a1623f","order":3,"width":0,"height":0,"name":"","label":"Summary:","format":"{{msg.payload}}","layout":"col-center","x":850,"y":300,"wires":[]},{"id":"b0473265.e44f5","type":"change","z":"5d791586.3e74ec","g":"9d04c384.31a5f8","name":"Reset Map","rules":[{"t":"set","p":"payload","pt":"msg","to":"{ \"name\":\"route_\", \"deleted\":true }","tot":"json"},{"t":"delete","p":"current","pt":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":520,"wires":[["e571b112.bfcd5","cb5a2a47.9df6f8"]]},{"id":"cb5a2a47.9df6f8","type":"delay","z":"5d791586.3e74ec","g":"9d04c384.31a5f8","name":"","pauseType":"delay","timeout":"500","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":670,"y":520,"wires":[["eb334dfc.bbb0e8"]]},{"id":"cc270465.cb0b9","type":"change","z":"5d791586.3e74ec","g":"ec1f8cef.a9393","name":"Summary","rules":[{"t":"set","p":"payload","pt":"msg","to":"$replace(payload.response.route[0].summary.text, /<[^>]*>?/ , '')","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":300,"wires":[["650b3f82.d8328"]]},{"id":"4cfe56da.a4ed9","type":"watson-text-to-speech","z":"5d791586.3e74ec","g":"5fe44114.69f43","name":"","lang":"en-US","langhidden":"en-US","langcustom":"NoCustomisationSetting","langcustomhidden":"","voice":"en-US_MichaelV3Voice","voicehidden":"","format":"audio/wav","password":"","apikey":"","payload-response":true,"service-endpoint":"","x":620,"y":880,"wires":[["3b8e43f1.ccfe6c"]]},{"id":"3b8e43f1.ccfe6c","type":"ui_audio","z":"5d791586.3e74ec","g":"5fe44114.69f43","name":"","group":"af0661fa.136e4","voice":"","always":"","x":860,"y":880,"wires":[]},{"id":"31d0f403.82b35c","type":"debug","z":"5d791586.3e74ec","g":"ec1f8cef.a9393","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":650,"y":400,"wires":[]},{"id":"9edb2ad8.67d3f8","type":"ui_switch","z":"5d791586.3e74ec","g":"5fe44114.69f43","name":"","label":"Mute navigation","tooltip":"","group":"b6bd120.a1623f","order":4,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-volume-off","oncolor":"black","offvalue":"false","offvalueType":"bool","officon":"fa-volume-up","offcolor":"black","x":320,"y":800,"wires":[["68bea694.bb9578"]]},{"id":"68bea694.bb9578","type":"switch","z":"5d791586.3e74ec","g":"5fe44114.69f43","name":"Enabled?","property":"payload","propertyType":"msg","rules":[{"t":"false"}],"checkall":"true","repair":false,"outputs":1,"x":520,"y":800,"wires":[["19ebc49e.e6086b","a158422b.45f5"]]},{"id":"19ebc49e.e6086b","type":"switch","z":"5d791586.3e74ec","g":"5fe44114.69f43","name":"Instructions","property":"instructions","propertyType":"msg","rules":[{"t":"nnull"}],"checkall":"true","repair":false,"outputs":1,"x":250,"y":880,"wires":[["3df7ff6.195ba"]]},{"id":"a158422b.45f5","type":"debug","z":"5d791586.3e74ec","g":"5fe44114.69f43","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":710,"y":800,"wires":[]},{"id":"3df7ff6.195ba","type":"change","z":"5d791586.3e74ec","g":"5fe44114.69f43","name":"Read Instructions","rules":[{"t":"set","p":"payload","pt":"msg","to":"instructions","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":430,"y":880,"wires":[["4cfe56da.a4ed9"]]},{"id":"9f8510b.9fe89f","type":"ui_group","z":"","name":"Map","tab":"5db782cc.c8d504","order":2,"disp":true,"width":"12","collapse":false},{"id":"b6bd120.a1623f","type":"ui_group","z":"","name":"Route","tab":"5db782cc.c8d504","order":1,"disp":true,"width":"6","collapse":false},{"id":"af0661fa.136e4","type":"ui_group","z":"","name":"Suggested Route","tab":"5db782cc.c8d504","order":3,"disp":true,"width":"10","collapse":false},{"id":"5db782cc.c8d504","type":"ui_tab","z":"","name":"HERE Navigation Route ","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Flow Info

Created 4 years, 8 months ago
Rating: not yet rated
view on github

Owner

johnwalicki

Actions

Rate:

Node Types

Core
  • change (x6)
  • debug (x7)
  • delay (x1)
  • function (x2)
  • http request (x3)
  • inject (x2)
  • switch (x2)
Other

Tags

  • HERE
  • navigation
  • dashboard
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option