Scope
In this workshop we will learn to use the JavaScript APIs from the HERE Location Suite.
- We render a map and place a marker on our current position with a custom image
- We search for all take-out restaurants around us and place markers on them
- We will find and draw a route from one of the restaurants
- We will display instructions to follow the route.
- Final code with visual customizations.
Get Credentials
To access any of the APIs, first get your credentials by signing up for a freemium account.
Generate apikeys
Join our Slack
During the workshop, if you have any questions, please drop them on our Slack channel general
Let's begin!
Pre-requisites
Download the ide VSCODE
Install the extension Live Server by Ritwick Dey.
This makes it super easy to see your application on your browser.
Create a folder named Workshop_HERE
- In VSCODE click on File > Open..
- Open the folder Workshop_HERE
- Click on File > New File and save it as 'index.html' within the folder
Base Code
Copy the code below in the file 'index.html'
<!DOCTYPE html>
<html>
<head>
<title>HERE Logistics Workshop</title>
<!-- SCRIPTS -->
<meta name="viewport" charset="UTF-8" content="initial-scale=1.0, width=device-width" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css"/>
</head>
<body>
<h1 style="text-align: center;">Food Delivery with HERE</h1>
<div id="mapContainer" style="width: 80vw; height: 50vh; background: #39B6B3; display: block; margin: 0 auto; border: solid 2px black; margin-top: 100px;" > </div>
<div style="width: 100vw; height: 40px; margin-top: 30px;">
<input type="button" onclick="showDeliveryRest()" value = "Show Restaurants" style="width: 200px; height: 30px; border: 2px solid black; display: block; margin: 0 auto; margin-top: 20px;">
</div>
<div id="panel" style="width: 30vw; background: #39B6B3; color: white; margin-top: 20px;display: block; margin: 0 auto;"></div>
</body>
<script>
var platform = new H.service.Platform({
apikey: "YOUR_JS_API_KEY"
});
// Obtain the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();
// Get your current position from wego.here.com
var myPosition = {lat: 52.53007, lng: 13.38526};
// Instantiate (and display) a map object:
var map = new H.Map(
document.getElementById('mapContainer'),
defaultLayers.vector.normal.map,
{
zoom: 11,
center: myPosition
});
var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US');
var mapEvents = new H.mapevents.MapEvents(map);
var behavior = new H.mapevents.Behavior(mapEvents);
// Get an instance of the routing service for using the routing API
var router = platform.getRoutingService();
// Get an instance of the geocoding and search service:
var service = platform.getSearchService();
</script>
</html>
Changing the language of the map
- To change the language, change the 'en-US' to the language code you want:
- en-US – English (United States)
- de-DE – German
- es-ES – Spanish
- fi-FI – Finnish
- fr-FR – French
- it-IT – Italian
- nl-NL – Dutch
- pl-PL – Polish
- pt-BR – Portuguese (Brazil)
- pt-PT – Portuguese (Portugal)
- ru-RU – Russian
- tr-TR – Turkish
- zh-CN – Chinese (China)
Adding a position marker using map object of Interactive maps API
- Add a folder named img inside the folder Food_Delivery_With_HERE
- Inside the folder img, save the image you want as the icon for restaurants and home
- Choose any image you want. I created mine using draw.io
- You can also download the ones I used:
and 
- Add the following code before </script> tag
// create an icon for the marker.
var homeIcon = new H.map.Icon('img/home.png');
var posMarker = new H.map.Marker(myPosition,{icon:homeIcon});
// Add the marker to the map
map.addObject(posMarker);
Go Live
Click on the 'Go Live' button on the bottom right of your VSCODE application window and see your application open in your default browser.
Alternatively right click on your code window and click on 'Open with Live Server'.
Search for Restaurants
Display Take-out restaurants around you using the Geocoder and Search REST API.
Add the following code before </script> tag
function showDeliveryRest(){
let param = {
at : myPosition.lat+','+myPosition.lng,
categories: "100-1000-0003", // category Take Out and Delivery Only ,
// for more, got to https://developer.here.com/documentation/geocoding-search-api/dev_guide/topics-places/places-category-system-full.html
limit:100
};
service.browse(param,displayRestaurants,alert);
}
Markers
Lets add nice markers to display these restaurants.
Add the following code before </script> tag
function displayRestaurants(response){
var takeOutIcon = new H.map.Icon('img/takeout.png');
var restGroup = new H.map.Group();
for(let i = 0; i<response.items.length; i++){
let restPosition = response.items[i].position;
let data = response.items[i].title;
let restMarker = new H.map.Marker(restPosition,{icon: takeOutIcon} );
restGroup.addObject(restMarker);
}
map.addObject(restGroup);
}
Select the Restaurant number 5 in the list for delivery
- The numbering here is from 0 to 99 so the 5th restaurant will be number 4
- Add the following code after
map.addObject(restGroup);inside the '}' in the previous step
let deliveryRestPosition = response.items[4].position;
showRoute(deliveryRestPosition);
Get a Route
Get Route from the selected restaurant to your home with a car.
Add the following code before </script> tag
function showRoute(restPos){
// console.log(restPos);
let routingParameters = {
// The routing mode:
mode: 'fastest;car;traffic:enabled',
// The start point of the route:
waypoint0: restPos.lat+','+restPos.lng ,
// The end point of the route:
waypoint1: myPosition.lat+','+myPosition.lng,
// To retrieve the shape of the route we choose the route
// representation mode 'display'
representation: 'display',
routeattributes : 'summary,shape',
language: "en-US"
};
router.calculateRoute(routingParameters, onResult,
function(error) {
alert(error.message);
});
}
Draw Route
Draw the route received form the Routing API using a Polyline
Add the following code before </script> tag
// Define a callback function to process the routing response:
var onResult = function(result) {
var route,
routeShape,
startPoint,
endPoint,
linestring;
if(result.response.route) {
// Pick the first route from the response:
let route = result.response.route[0];
// Pick the route's shape:
routeShape = route.shape;
// Create a linestring to use as a point source for the route line
linestring = new H.geo.LineString();
// Push all the points in the shape into the linestring:
routeShape.forEach(function(point) {
var parts = point.split(',');
linestring.pushLatLngAlt(parts[0], parts[1]);
});
// Create a polyline to display the route:
var routeLine = new H.map.Polyline(linestring, {
style: { strokeColor: 'RGB(116, 66, 200)', lineWidth: 7 }
});
// Add the route polyline and the two markers to the map:
map.addObject(routeLine);
// Set the map's viewport to make the whole route visible:
map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
}
};
Driving Instructions
Select instructions from the route to be displayed.
Add the following code before map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
let maneuver = route.leg[0].maneuver;
let summary = route.summary;
displayInstructions(maneuver,summary);
Display Instructions
Display these instructions in the "panel"
Copy the following code above the </script> tag
Number.prototype.toMMSS = function () {
return Math.floor(this / 60) +' minutes '+ (this % 60) + ' seconds.';
}
function displayInstructions(maneuver,summary){
var totalTravelTime = 0;
for(let i=0; i< maneuver.length; i++){
instructions = maneuver[i].instruction;
// console.log(instructions)
document.getElementById("panel").innerHTML+= ( i+1) + ') '+instructions + `<br>`;
}
document.getElementById("panel").innerHTML+="Total distance : " + (summary.distance) + ' m' ;
document.getElementById("panel").innerHTML+="Estimated time : " + summary.travelTime.toMMSS();
}
Final Result
Final Code
Check final code with modifications
Contact Us
Watch live webinars and videos
