Solutions: Day 41-45 #100DaysOfCode
We are in week 9 of #100DaysOfCode with HERE. If you have no idea what I'm talking about, take a look at this blog post which will tell you everything about #100DaysOfCode. In this blog post, I will cover solutions for days 41 through 45. If you have missed the solutions for days 0-40, you can read them in the previous blogs posts or on our YouTube channel.
Let's begin!
Day 41/100
With Day 41, we will start exploring the Routing API v8. The routing API is a powerful API which, as the name suggests, calculates navigable routes between two points. Along with this, there are a number of endpoints which the routing API provides to get efficient routing and navigation. For day 41, we will simply get the route in the form of a polyline for point A to B using car as a mode of transport. You can find the documentation for routing v8 parameters in the API reference section
// Get an instance of the routing service version 8:
var router = platform.getRoutingService(null, 8);
// Create the parameters for the routing request:
var routingParameters = {
transportMode:'car',
routingMode: 'fast',
origin: '52.4569927,13.380545',
destination: '52.52407865,13.429371',
return:'polyline',
};
// Define a callback function to process the routing response:
var onResult = function(result) {
console.log(result);
};
// error callback function
var onError = function(error) {
alert(error.message);
};
// Call calculateRoute() with the routing parameters,
// the callback and an error callback function
router.calculateRoute(routingParameters, onResult, onError);
As the documents indicate, the parameters transportMode, origin, destination are required parameters. This call will give you a route id which is used to identify the route and late retrieve it. Adding the return parameter as polyline will give you a Flexible Polyline in the return object of the route. You can use this object to draw the route on the map.
routes: (1) […]
0: {…}
id: "2d1ba2fb-4515-445c-ade1-8a6be6db00ad"
sections: (1) […]
0: { … }
arrival: {…}
place: Object { type: "place", location: {…},
originalLocation: {…} }
departure: Object { place: {…} }
id: "4e9497fb-c18a-4094-a65d-918e3d29d05c"
polyline:"BGg03hkDig2wZjD-kBT4I8uB0K4coGjDkhBnBsOzKovDnB4IsnBsJ0KkD4XoGw8C0UkwBgKoGoBsdoG0KwCkwBoLoGoBgZoGkXsEkSoBgjBwCkNU8VoB8VU8VnB0ZnB4mBT8pBA8aUwWUkXUwMA0UU4N8BwHAgPUoLU4NTsEAoGUoGUkIoB0PA4cA8LUgPTkiDU4uC8B01CoBsEUopBUsqCwC4DAg4DkDopBoBw0BUwtC8BoGAsTAgKAoLUgoB8B8QA4XUkIAo4B7BgenB4rBoB4NoBsEUoaoB8akDkXkDouBsJ8QsE8LkD8QsEoasJsOgF0P0FgUwHoL0FgK4DoVsJoQwH4SkNgP0KkN4I8QsJ8VwM0jBgZ8QkNoakXwM0K8LkI0KsE4I8BwHAoQ7B0FnBwR_EgjBvHof3IoL7BzF0oBrEkwBnB8aA0U8BgoBoB8uBoBgPkDsd4DgtBoBwMU4I8BsTsEgPgFwR4D4N8GoQ0FwCoG8BoLUsEAkNvC8L3D4I3D0FvC4kCzoBkNjI0FjDwRzKgKzFoGvC8L3DwRrEsOA4N8B8Q0FsE8B8G4DsJ0FkIoGoGgF4IwHwW8VwWwRgUgP4zCw-BwHgFsEwCoGkD8V4NsTsO8LoLofkXgP0KwHsEsEkDoBUsEkDgKwH0FsE8L4I4X4SsTkNsEkD4SkNwR8LkDoGwCwCkNgKoG0FsEsE4DsEkIsJ4IgK8GsJ0F8GoG4IsJoL8G8GkI0FwHAkDA0KjDsOrEwCgK4D8LwCwHoBsEkDwHoLsYoL4S4IkNgFkI4D0F0F4IwC4DwC4D8GgK4NsTkSoaoV0e8Q4XgjBwvBwM8QwWwbsE0F0F8G0F8GwCkDsd0jB4DsE4IgK4N8Q0U0Z8LgPkD4D8VkckIsJgU4Xoa0egP8QgZ4csOsTsJsOsEwH8V4mBgKkNwHwMkSwlBsJsTkI4S8LgZ4DwHwHkNwHoLsE0FoVsYkIsJwb4cwbkc8L8L4IgKgF0F0Z8a8LkN0oBgtB0P4SoLoQ4I4NsJ0KwRoVgPwR0UkX8GwHkI4IwWkcwqBozBoQsT0e8kB0U4X4Sge0KsOsT0ZjD0PvC4SnBwMUoGkD4N_EwH3D8G7L0ZzFgPnLoa3I0UrOsiBjI8QnLkSrJ4NrEwH_J0PvMgUvHoLrOwWjIwM3XkmBjIwM3D0F7G8GrEwCrEoBnGT_EnBjI3D_J_E3SrJnGjDxEhC"
transport: Object { mode: "car" }
type: "vehicle"
length: 1
Day 42/100
For day 42, we will render the flexible polyline received as a result of our routing v8 call from day 41. The flexible polyline is a compressed version of a list of coordinates on the route. You can find out more about flexible polyline encoding our GitHub repository. For this task, we will use the JS wrapper for the flexible polyline and use the style option of the polyline object to change the color of the polyline to '#034F84'
// Define a callback function to process the routing response:
var onResult = function(result) {
console.log(result);
if (result.routes.length) {
// result.routes.forEach(route =>{
result.routes[0].sections.forEach((section) => {
// Create a linestring to use as a point source for the route line
let linestring = H.geo.LineString.fromFlexiblePolyline(section.polyline);
// Create a polyline to display the route:
let routeLine = new H.map.Polyline(linestring, {
style: { strokeColor: '#034F84', lineWidth: 3 }
});
// Create a marker for the start point:
let startMarker = new H.map.Marker(section.departure.place.location);
// Create a marker for the end point:
let endMarker = new H.map.Marker(section.arrival.place.location);
// Add the route polyline and the two markers to the map:
map.addObjects([routeLine, startMarker, endMarker]);
// Set the map's viewport to make the whole route visible:
map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});
});
}
};
Day 43/100
With day 43, we tweak the day 41 call by adding the parameter alternatives to get a maximum of 4 routes between the given points. You can choose to render all four routes and let the user select the desired route.
var routingParameters = {
transportMode:'car',
routingMode: 'fast',
origin: '52.4569927,13.380545',
destination: '52.52407865,13.429371',
alternatives:3,
return:'polyline',
};
Day 44/100
Day 44 shows us the difference between a the same route at prime time vs at a time where the traffic is less on the streets. You will see the difference on a busy street immediately where the order of the suggested routes often changes considering traffic.
// Create the parameters for the routing request:
var routingParameters = {
transportMode:'car',
routingMode: 'fast',
origin: '52.4569927,13.380545',
destination: '52.52407865,13.429371',
alternatives:3,
departureTime:'2020-05-13T09:00:00',
return:'polyline',
};
// Create the parameters for the routing request:
var routingParameters = {
transportMode:'car',
routingMode: 'fast',
origin: '52.4569927,13.380545',
destination: '52.52407865,13.429371',
alternatives:3,
departureTime:'2020-05-13T15:00:00',
return:'polyline',
};
Day 45/100
For day 45, we get the total duration required and distance covered by the route by requesting a summary of the route. The return parameter summary along with the polyline gives us the summary of each route section in terms of duration in seconds and length of the route link in meters.
// Create the parameters for the routing request:
var routingParameters = {
transportMode:'car',
routingMode: 'fast',
origin: '52.4569927,13.380545',
destination: '52.52407865,13.429371',
alternatives:3,
departureTime:'2020-05-13T09:00:00',
return:'polyline,summary'
};
This week we covered the Routing API v8 endpoints on #100DaysOfCode. Next week, we will take look at a few more endpoints of the Routing API v8. Keep following us on Twitter for more tasks and complete all 100 days. If you want to watch the video version of these solutions, take a look at our playlist for #100DaysOfCode on YouTube. If you want the code snippets of the APIs covered with #100DaysOfCode, head over to the 100daysofcode GitHub repository.
While you're at it, why don't you take a look at the blog post of the semifinalists of BCX2020. In the blog post, they explain how they made a apartment hunting app using HERE maps and services.
Check the step-by-step tutorial to find Geo-coordinates using the Geocoding and Search API.
Happy coding!
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