Route Mapping - Route length
We left off last time being able to plot a route with start and end markers. What we now need is to be able to show the current route length. Unfortunately, there doesn't appear to be a way to get the distance between map points within the BingMaps API.
Calculate the distance between two latitude/longitude points
Thankfully, there is a simple solution! There are a couple of Javascript libraries at Movable Type Scripts, geo.js and latlon.js which provide just the thing we need to calculate the distance between the points on the map. Simply add up the distances as we go, and we have our route's total distance.
The Javascript is really simple:
var p1 = new LatLon(latitude1, longitude1);
var p2 = new LatLon(latitude2, longitude2);
var distance = p1.distanceTo(p2);
Easy. In the 'add point' function, we simply need to update the current distance, given the newly added point:
curDist += distanceBetween(points[points.length - 2], point);
updateDistance();
And the two new functions:
function distanceBetween(p1, p2) {
var from = new LatLon(p1.latitude, p1.longitude);
var to = new LatLon(p2.latitude, p2.longitude);
return parseFloat(from.distanceTo(to));
}
function updateDistance() {
$('#currentDistance').val(curDist.toFixed(3));
}
That finishes off the basic functionality of route mapping that I need - there are a few other things on the list, for example, an undo, distance markers (e.g. every mile or kilometer), and a simple way to save and restore a route.
Here's the final code listing for the basic functionality:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.movable-type.co.uk/scripts/geo.js"></script>
<script type="text/javascript" src="http://www.movable-type.co.uk/scripts/latlon.js"></script>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var curDist = 0;
$(function() {
var map = new Microsoft.Maps.Map($('#mapDiv')[0], {credentials: '[key]'});
var points = [];
Microsoft.Maps.Events.addHandler(map, 'dblclick', function(e) {
e.handled = true;
var point = map.tryPixelToLocation(new Microsoft.Maps.Point(e.getX(), e.getY()));
if (points.length == 0)
map.entities.push(new Microsoft.Maps.Pushpin(point, null));
else if (points.length > 1)
map.entities.pop();
points.push(point);
if (points.length == 1) {
curDist = 0;
updateDistance();
return;
}
curDist += distanceBetween(points[points.length - 2], point);
map.entities.push(new Microsoft.Maps.Polyline([points[points.length - 2], point], null));
map.entities.push(new Microsoft.Maps.Pushpin(point, { icon: 'http://www.bingmapsportal.com/Content/poi_custom.png'}));
updateDistance();
});
});
function distanceBetween(p1, p2) {
var from = new LatLon(p1.latitude, p1.longitude);
var to = new LatLon(p2.latitude, p2.longitude);
return parseFloat(from.distanceTo(to));
}
function updateDistance() {
$('#currentDistance').val(curDist.toFixed(3));
}
</script>
</head>
<body style="height: 100%">
<div><input type="text" id="currentDistance" value="" style="text-align:right;" /> km</div>
<div id="mapDiv" style="position:relative; width:auto; height: 500px;"></div>
</body>
</html>
