How to Show Bing Traffic Data Using Java Script

I was trying to show Bing Map with Traffic Layer using JavaScript/Ajax and found pretty good example

 

Here is complete Snippet. Just create a test HTML file and copy / paste snippet to see what it look like. Click Show traffic button to see live traffic.

 

<!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=6.3"></script>

      <script type="text/javascript">
         var map = null;
         var Location = new VELatLong(47.64, -122.23);

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

         function ShowTraffic()
         {
            map.LoadTraffic(true);
            map.ShowTrafficLegend(50,50);
            map.SetTrafficLegendText("The traffic legend");
         }

         function ClearTraffic()
         {
            map.ClearTraffic();
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <h3>Traffic</h3>
      <p> </p>
      <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
      <input id="showtraffic"  type="button" value="Show Traffic"  onclick="ShowTraffic();"/>
      <input id="cleartraffic" type="button" value="Clear Traffic" onclick="ClearTraffic();"/>
   </body>
</html>

 

 

 

Binary World is a Software Development company located in Atlanta, USA (since 2007). Binary World specialized in Business Intelligence, mobile, cloud computing and .Net Application Development.

Leave a Reply