none
Bing Maps REST service direction map question RRS feed

  • Question

  • I am currently trying to create a map using the REST service in teh AJAX Control 7.0 interactive SDK and have a question regarding the getDirection() method.

    The getDirections method returns a route map with step by step directions. I was wondering how I can change the code below to where I only return the route map without the explained text directions?

    <!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: 'Your 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=' + start + '&wp.1=' + end + '&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>

    Wednesday, August 1, 2012 8:24 PM

Answers

  • You simply need to remove the code that generates the instructions and leave the code that generates the line. Here is a modified version of your code:

    <!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: 'Your 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=' + start + '&wp.1=' + end + '&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)
           { 
               if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0) 
               {
    			   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')
    			   {
    				   alert("result.errorDetails[0]";
    			   }else
    			   {
    				   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>
        </body>
     </html>


    http://rbrundritt.wordpress.com

    Thursday, August 2, 2012 8:12 AM