Export (0) Print
Expand All
4 out of 8 rated this helpful - Rate this topic

Getting Route Directions Using the REST Services

Bing
Gg427607.Important(en-us,MSDN.10).gifImportant:
The latest release of the Bing Maps AJAX Control 7.0 provides directions functionality in the Microsoft.Maps.Directions module. This module allows you to easily customize, calculate, and display directions and a route on your web site without needing to use REST services. Get started by going to the DirectionsManager Class topic, which contains information about the calculateDirections method and sample code.

This topic describes how to use the Bing Maps REST Services to calculate and display a route on the map.

Initialize the Map

Before you add route functionality, initialize the map using the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
         
         var map = null;
 
         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road }); 

         }
     
      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>

Construct the Route Request

Next, add input controls and construct the Bing Maps REST Services Route request.

In this example, a route is calculated between a specified start and end point. Add two text boxes and a button to initiate the route calculation.

<input id="txtStart" type="text" value="Seattle"/>
<input id="txtEnd" type="text" value="Portland"/>
<input type="button" value="Calculate Route" onclick="ClickRoute()"/>

Then, construct the REST route request using the input values.

var routeRequest = "http://dev.virtualearth.net/REST/v1/Routes?wp.0=" + document.getElementById('txtStart').value + "&wp.1=" + document.getElementById('txtEnd').value + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials;

Display the Results

Finally, add code to make the route request when the button is clicked, and add code to the RouteCallback function to set the map view and draw the route. The final code is shown below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
         
         var map = null;
 
         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId: Microsoft.Maps.MapTypeId.road }); 

  
         }

         function ClickRoute(credentials)
         {

            map.getCredentials(MakeRouteRequest);
         }


         function MakeRouteRequest(credentials)
         {
            var routeRequest = "http://dev.virtualearth.net/REST/v1/Routes?wp.0=" + document.getElementById('txtStart').value + "&wp.1=" + document.getElementById('txtEnd').value + "&routePathOutput=Points&output=json&jsonp=RouteCallback&key=" + credentials;

            CallRestService(routeRequest);

         }


          function RouteCallback(result) {

                          
             if (result &&
                   result.resourceSets &&
                   result.resourceSets.length > 0 &&
                   result.resourceSets[0].resources &&
                   result.resourceSets[0].resources.length > 0) {
                   
                     // Set the map view
                     var bbox = result.resourceSets[0].resources[0].bbox;
                     var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
                     map.setView({ bounds: viewBoundaries});


                     // Draw the route
                     var routeline = result.resourceSets[0].resources[0].routePath.line;
                     var routepoints = new Array();
                     
                     for (var i = 0; i < routeline.coordinates.length; i++) {

                         routepoints[i]=new Microsoft.Maps.Location(routeline.coordinates[i][0], routeline.coordinates[i][1]);
                     }

                     
                     // Draw the route on the map
                     var routeshape = new Microsoft.Maps.Polyline(routepoints, {strokeColor:new Microsoft.Maps.Color(200,0,0,200)});
                     map.entities.push(routeshape);
                     
                 }
         }


         function CallRestService(request) 
         {
            var script = document.createElement("script");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", request);
            document.body.appendChild(script);
         }

      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
      <input id="txtStart" type="text" value="Seattle"/>
      <input id="txtEnd" type="text" value="Portland"/>
      <input type="button" value="Calculate Route" onclick="ClickRoute()"/>
   </body>
</html>
Show:
© 2014 Microsoft. All rights reserved.