none
Calculating routes in Bing Maps RRS feed

  • Question

  • I want to use the REST services to find directio

    I specify the waypoints for the routes in the REST call as follows: 

    http://dev.virtualearth.net/REST/V1/Routes?wp.0=37.779160067439079,-122.42004945874214&wp.1=32.715685218572617,-117.16172486543655&key=BingMapsKey

    This is shown in the code below:

                                                   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Find directions</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;
          var end;
          var start;
          function getMap()
          {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: Bing Maps Key});
            alert('Insert key to make valid REST service call');
          }

          function getDirections()
          {
            start= 'Seattle, wa'; end= 'Portland, OR'; 
            map.getCredentials(callRouteService);  
          }

          function callRouteService(credentials) 
          {
          var routeRequest = 'http://dev.virtualearth.net/REST/v1/Routes?wp.0=37.779160067439079,-122.42004945874214&wp.1=32.715685218572617,-

    117.16172486543655&routePathOutput=Points&output=json&jsonp=RouteCallback&key=' + credentials;
            var mapscript = document.createElement('script');           
            mapscript.type = 'text/javascript';           
            mapscript.src = routeRequest;
            document.getElementById('myMap').appendChild(mapscript);
          }

          function routeCallback(result)
          { 
              var output = document.getElementById("output");
              if (output)
              {
                  while (output.hasChildNodes()) {
                      output.removeChild(output.lastChild); 
                  }   
                  var resultsHeader = document.createElement("h5");
                  var resultsList = document.createElement("ol");
                  output.appendChild(resultsHeader);
                  output.appendChild(resultsList);
              }

              if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0) 
              {
              resultsHeader.innerHTML = "Bing Maps REST Route API  <br/>  Route from " + result.resourceSets[0].resources[0].routeLegs[0].startLocation.name + " to " + result.resourceSets[0].resources[0].routeLegs

    [0].endLocation.name;
              var resultsListItem = null;

              for (var i = 0; i < result.resourceSets[0].resources[0].routeLegs[0].itineraryItems.length; ++i)
              {
                  resultsListItem = document.createElement("li");
                  resultsList.appendChild(resultsListItem);
                  resultStr = result.resourceSets[0].resources[0].routeLegs[0].itineraryItems[i].instruction.text;
                  resultsListItem.innerHTML = resultStr;
              }
              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}); 
              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]);
              } 
              var routeshape = new Microsoft.Maps.Polyline(routepoints, {strokeColor:new Microsoft.Maps.Color(200,0,0,200)}); 

              var startPushpinOptions = {anchor: new Microsoft.Maps.Point(10, 32) }; 
              var startPin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(routeline.coordinates[0][0], routeline.coordinates[0][1]), startPushpinOptions); 

              var endPushpinOptions = {anchor: new Microsoft.Maps.Point(10, 32)}; 
              var endPin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(routeline.coordinates[routeline.coordinates.length-1][0], routeline.coordinates[routeline.coordinates.length-1][1]), endPushpinOptions); 
              map.entities.push(startPin); 
              map.entities.push(endPin); 
              map.entities.push(routeshape); 
          }

          else
          {
              if (typeof(result.errorDetails) != 'undefined')
              {
                  resultsHeader.innerHTML = result.errorDetails[0];
              }
                  alert("No Route found");
              }
          }
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
          <div>
             <input type="button" value="GetDirections" onclick="getDirections();" />
          </div>
          <div id="output"></div>

       </body>
    </html>

    This code is not working. Please help!


    anwesha

    Friday, October 5, 2012 7:33 PM

Answers

  • There's several bugs in your code - firstly, the jsonp parameter in your REST request is RouteCallback but your function is named routeCallback - these need to match.

    Next, in the routeCallback function itself, you're trying to reference the result.resourceSets[0].resources[0].routeLegs[0].startLocation.name element. But this element doesn't exist (as specified at http://msdn.microsoft.com/en-us/library/ff701718.aspx, startLocation is only populated when you request a route between a landmark or address, not a coordinate location as you are using).  I suggest you change this line to display coordinates of the actualStart and actualEnd instead:

    resultsHeader.innerHTML = "Bing Maps REST Route API  <br/>  Route from " + result.resourceSets[0].resources[0].routeLegs[0].actualStart.coordinates + " to " + result.resourceSets[0].resources[0].routeLegs[0].actualEnd.coordinates;


    twitter: @alastaira blog: http://alastaira.wordpress.com/ | Pro Spatial with SQL Server 2012

    Monday, October 8, 2012 10:18 AM
    Moderator

All replies

  • There's several bugs in your code - firstly, the jsonp parameter in your REST request is RouteCallback but your function is named routeCallback - these need to match.

    Next, in the routeCallback function itself, you're trying to reference the result.resourceSets[0].resources[0].routeLegs[0].startLocation.name element. But this element doesn't exist (as specified at http://msdn.microsoft.com/en-us/library/ff701718.aspx, startLocation is only populated when you request a route between a landmark or address, not a coordinate location as you are using).  I suggest you change this line to display coordinates of the actualStart and actualEnd instead:

    resultsHeader.innerHTML = "Bing Maps REST Route API  <br/>  Route from " + result.resourceSets[0].resources[0].routeLegs[0].actualStart.coordinates + " to " + result.resourceSets[0].resources[0].routeLegs[0].actualEnd.coordinates;


    twitter: @alastaira blog: http://alastaira.wordpress.com/ | Pro Spatial with SQL Server 2012

    Monday, October 8, 2012 10:18 AM
    Moderator
  • Ya tanoshimi, you are right indeed. I figured that out sometime later..Thanks anyways

    anwesha

    Monday, October 8, 2012 4:03 PM