Hands On

Distance Calculations Between Points with the HERE JavaScript SDK

By Nic Raboy | 23 April 2019

Try HERE Maps

Create a free API key to build location-aware apps and services.

When I’m interacting with developers using HERE APIs and services, one common question I get is around distance calculations. The HERE SDK and APIs make it easy to calculate paths or routes, but it isn’t the most obvious if you want to pull the total distance from those calculations. In fact, there are multiple different distances that can be obtained.

As a developer, you could be searching for the distance between two points regardless of roadways. Take, for example, air travel or similar for that type of distance. You could also be searching for the distance between two points along a route that can be navigated. Think your GPS when you’re driving or similar for that type of distance.

We’re going to take a look at calculating these two distances using the HERE JavaScript SDK.

Calculating the Absolute Distance Between Two Points

The first example we’ll look at is around the absolute distance between two points, ignoring any kind of roads or similar. Let’s take a look at the following example code:

const tracyMarker = new H.map.Marker({ lat: 37.7397, lng: -121.4252 });
const stocktonMarker = new H.map.Marker({ lat: 37.9577, lng: -121.2908 });
const straightLineString = new H.geo.LineString();
straightLineString.pushPoint(tracyMarker.getPosition());
straightLineString.pushPoint(stocktonMarker.getPosition());
const straightPolyline = new H.map.Polyline(straightLineString);
map.addObject(straightPolyline);

Of course if you really wanted to try the above code, you’d need to properly configure your application and add a map, but hopefully you can get the idea. We have two markers and we’re drawing a straight line between those two markers.

If we wanted to calculate the distance, we would typically make use of the haversine algorithm, because remember, the earth is not flat. To make our lives easier, the HERE JavaScript SDK takes care of this algorithm for us.

Let’s take a look at the following modification to our code:

const distance = tracyMarker.getPosition().distance(stocktonMarker.getPosition());
console.log(distance);

The above lines would print out the distance in meters. The distance function is part of the H.geo.Point class which is returned from markers when calling the getPosition function.

Calculating the Distance Along a Route

With the basic distance calculation out of the way, we can take a look at finding the route distance. After all, I probably want to know how far I’m driving when I enter information into my GPS.

Let’s take a look at the following code for our example:

const params = {
mode: "fastest;car;traffic:enabled",
waypoint0: "37.7397,-121.4252",
waypoint1: "37.9577,-121.2908",
representation: "display"
};
routingService.calculateRoute(params, success => {
const routeLineString = new H.geo.LineString();
success.response.route[0].shape.forEach(point => {
const [lat, lng] = point.split(",");
routeLineString.pushPoint({
lat: lat,
lng: lng
});
});
const routePolyline = new H.map.Polyline(
routeLineString,
{
style: {
lineWidth: 5
}
}
);
}, error => {
console.log(error);
});

You’ve probably seen some form of the above code in the documentation. Like with the previous example, you’ll need to do some preparation work in your code if you actually want to run it. I’m just sharing the part that is important to us.

As it stands, we cannot easily get the distance from the above code. We need to make a modification. In the params, we need to add the following:

routeAttributes: "summary"

The summary will return information like distance, or estimated travel time. With the summary information being returned, we can access it in the success callback of the calculateRoute function:

console.log(success.response.route[0].summary.distance);

Like with our other distance calculation, this distance is also in meters.

Conclusion

You just saw how to do some basic distance calculations with your location data using the HERE JavaScript SDK. There are plenty of other scenarios, but these are the two most common that I receive when I’m at developer events.