none
Different color in multiple routes ajax v7 RRS feed

  • Question


  • I want to make application use different routes in one map, A->B, C->D

    A->B->C->D

    I thought to connect these routes are, then change the color B-> C with transparent color


    Tuesday, May 7, 2013 7:26 PM

Answers

  • Your better off just making two route requests. This would work much faster as you would be loading a lot less data. With routing most of the loading time is due to the size of the responses and not the actual calculation.

    http://rbrundritt.wordpress.com

    Wednesday, May 8, 2013 10:43 AM
  • Using the REST services will be much easier to do. To do this simply follow this example: http://msdn.microsoft.com/en-us/library/gg427607.aspx Simply make a second request that uses a different set of end points.

    http://rbrundritt.wordpress.com

    Wednesday, May 8, 2013 6:16 PM

All replies

  • Your better off just making two route requests. This would work much faster as you would be loading a lot less data. With routing most of the loading time is due to the size of the responses and not the actual calculation.

    http://rbrundritt.wordpress.com

    Wednesday, May 8, 2013 10:43 AM
  • Thank you for fast reply,

    can you explain how to making two route requests? 

    I'm already create route A->B and C->D but it takes long time to load.

    but I need to get distance A - C and B - D. Please help me to get it.


    Wednesday, May 8, 2013 11:15 AM
  • How are you making route requests now. Using the Directions Module or using the Bing Maps REST services?

    http://rbrundritt.wordpress.com

    Wednesday, May 8, 2013 3:47 PM
  • im using Bing Maps REST services. 

    I want to use Directions Module, but I don't undestand.. please help :(

    Wednesday, May 8, 2013 4:00 PM
  • Using the REST services will be much easier to do. To do this simply follow this example: http://msdn.microsoft.com/en-us/library/gg427607.aspx Simply make a second request that uses a different set of end points.

    http://rbrundritt.wordpress.com

    Wednesday, May 8, 2013 6:16 PM
  • Thanks for reply..

    Using the REST services take delay 15s to load map. Can I make it faster? here is my 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, end2;
       var start, start2;
       var route1bbox;
       var route1bbox2;
       
       function GetMap()
       {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Credential'});
        //alert('Insert key to make valid REST service call');
       }
       
       function GetDirections()
       {
        start= 'Seattle, wa'; end= 'Portland, OR'; 
        start2= 'Richland, WA'; end2= 'Pasco, WA'; 
        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);
    	
    	
        routeRequest = 'http://dev.virtualearth.net/REST/v1/Routes?wp.0=' + start2 + '&wp.1=' + end2 +'&routePathOutput=Points&output=json&jsonp=RouteCallback2&key=' + credentials;
        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; 
    	 
    	 if(route1bbox == null && route1bbox2 == null){
    		route1bbox = new Microsoft.Maps.Location(bbox[0], bbox[1]);
    		route1bbox2 = new Microsoft.Maps.Location(bbox[2], bbox[3]);
    	 }else{
    		 var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(
    			 route1bbox
    			 , route1bbox2
    			 , new Microsoft.Maps.Location(bbox[0], bbox[1])
    			 , new Microsoft.Maps.Location(bbox[2], bbox[3])
    		 
    		 );
    		 map.setView({ bounds: viewBoundaries}); 
    	 }
    	 
         //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");
         }
       }
       
       function RouteCallback2(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; 
    	 if(route1bbox == null && route1bbox2 == null){
    		route1bbox = new Microsoft.Maps.Location(bbox[0], bbox[1]);
    		route1bbox2 = new Microsoft.Maps.Location(bbox[2], bbox[3]);
    	 }else{
    		 var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(
    			 route1bbox
    			 , route1bbox2
    			 , 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(); GetDirections();">
       <div id='myMap' style=" width:400px; height:400px;"></div>
       <div>
         <input type="button" value="GetDirections" onclick="GetDirections();" />
       </div>
       <div id="output"></div>
       
      </body>
    </html>

     

    how to use multiple route like that using Directions Module?



    Wednesday, May 8, 2013 6:35 PM