Route Mapping
I've been playing with the Bing Maps SDK with the aim of manually plotting a route and showing the overall distance. It turns out to be fairly simple.
Task 1: Create a Bing Maps account
The Bing Maps SDK requires a Key. Go to bingmapsportal.com, log in and create a new key.
Task 2: Lines
The first task is to plot some lines on the map. There's already an example on the nice interactive SDK site which shows how to draw a line on the map using the Polyline class. Another example shows how to capture mouse events.
I plan on plotting the route using double-clicks, so just getting something up and running with the Polyline, I can simply do the following:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.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">
$(function() {
var map = new Microsoft.Maps.Map($('#mapDiv')[0], {credentials: '[key obtained from Task1 above]'});
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()));
points.push(point);
if (points.length == 1) return;
map.entities.push(new Microsoft.Maps.Polyline([points[points.length - 2], point], null));
});
});
</script>
</head>
<body style="height: 100%">
<div id="mapDiv" style="position:relative; width:auto; height: 500px;"></div>
</body>
</html>
Which gives us simple route plotting like so:
That's all there is to it! Next up...adding some start and end markers.
Posted on the 05 May 2012 by
