VEMap.DeleteRoute Method

  • Article

You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.

Clears the current route (VERoute Class object) from the map.

VEMap.DeleteRoute();

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

      <script type="text/javascript">
         var map = null;

         // Initial map view
         var SeattleEastside = new VELatLong(47.65, -122.24, 0, VEAltitudeMode.Default);

         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap(SeattleEastside, 8);
         }

         function GetRouteMap()
         {
            var locations;

            if (legForm.legType[0].checked)
            {
          locations = new Array("Tacoma WA", "Seattle WA", "Everett WA");
            }
            else if (legForm.legType[1].checked)
            {
               locations = new Array("Tacoma WA", "Bellevue WA", "Everett WA");
            }

            var options = new VERouteOptions;

            // Otherwise what's the point?
            options.DrawRoute      = true;

            // So the map doesn't change:
            options.SetBestMapView = false;

            // Call this function when map route is determined:
            options.RouteCallback  = ShowTurns;

            // Show as miles
            options.DistanceUnit   = VERouteDistanceUnit.Mile;

            // Show the disambiguation dialog
            options.ShowDisambiguation = true;

            map.GetDirections(locations, options);
         }

         function ShowTurns(route)
         {
            var turns = "<h3>Turn-by-Turn Directions</h3>(rounding errors are possible)";

            turns += "<p><b>Distance:</b> " + route.Distance.toFixed(1) + " miles";

            turns += "<br/><b>Time:</b> " + GetTime(route.Time) + "</p>";

            if (dirsForm.dirsType[0].checked)
            {
               // Unroll route and populate DIV
               var legs          = route.RouteLegs;
               var leg           = null;
               var turnNum       = 0;  // The turn #

               // Get intermediate legs
               for(var i = 0; i < legs.length; i++)
               {
                  // Get this leg so we don't have to derefernce multiple times
                  leg = legs[i];  // Leg is a VERouteLeg object

                  var legNum = i + 1;
                  turns += "<br/><b>Distance for leg " + legNum + ":</b> " + leg.Distance.toFixed(1) + " miles" +
                           "<br/><b>Time for leg "     + legNum + ":</b> " + GetTime(leg.Time) + "<br/><br/>";

                  // Unroll each intermediate leg
                  var turn        = null;  // The itinerary leg
                  var legDistance = null;  // The distance for this leg
                  
                  for(var j = 0; j < leg.Itinerary.Items.length; j ++)
                  {
                     turnNum++;
                     
                     turn = leg.Itinerary.Items[j];  // turn is a VERouteItineraryItem object

                     turns += "<b>" + turnNum + "</b>\t" + turn.Text;

                     legDistance    = turn.Distance;

                     // So we don't show 0.0 for the arrival
                     if(legDistance > 0)
                     {
                        // Round distances to 1/10ths
                        turns += " (" + legDistance.toFixed(1) + " miles";

                        // Append time if found
                        if(turn.Time != null)
                        {
                           turns += "; " + GetTime(turn.Time);
                        }

                        turns += ")<br/>";
                     }
                  }

                  turns += "<br/>";
               }

               // Populate DIV with directions
               SetDirections(turns);
            }
         }

         function SetDirections(s)
         {
            var d = document.getElementById("directions");
            d.innerHTML = s;
         }

         // time is an integer representing seconds
         // returns a formatted string
         function GetTime(time)
         {
            if(time == null)
            {
               return("");
            }

            if(time > 60)
            {                                 // if time == 100
               var seconds = time % 60;       // seconds == 40
               var minutes = time - seconds;  // minutes == 60
               minutes     = minutes / 60;    // minutes == 1


               if(minutes > 60)
               {                                     // if minutes == 100
                  var minLeft = minutes % 60;        // minLeft    == 40
                  var hours   = minutes - minLeft;   // hours      == 60
                  hours       = hours / 60;          // hours      == 1

                  return(hours + " hour(s), " + minLeft + " minute(s), " + seconds + " second(s)");
               }
               else
               {
                  return(minutes + " minutes, " + seconds + " seconds");
               }
            }
            else
            {
               return(time + " seconds");
            }
         }
        
         function ClearAll()
         {
            map.DeleteRoute();
            SetDirections("");
            map.LoadMap(SeattleEastside, 8);
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <h3>Get a Route and Directions (optional) from Tacoma to Everett</h3>

      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>

      <form name="legForm">
         Route:
         <br/>
         <input id="thruSeattle" type="radio" name="legType" checked="checked"/>
        Through Seattle
         <br/>
         <input id="thruBellevue" type="radio" name="legType"/>
        Through Bellevue
      </form>

      <form name="dirsForm">
         <input id="showdirs" type="radio" name="dirsType" checked="checked"/>
         Show turn-by-turn directions (below)
         <br/>
         <input id="showdirs" type="radio" name="dirsType"/>
         Don't show turn-by-turn directions
      </form>

      <input id="getroutemap" type="button" value="Get Route Map" onclick="GetRouteMap();"/>
      <input id="clear"       type="button" value="Clear All"     onclick="ClearAll();"/>

      <div id='directions'></div>
   </body>
</html>