In this article, we provide an example of Bing Maps In which we show the traffic in the map with the help of the Ajax Control 7.0 ISDK.
First we use a <div> for our map and set its Height and Width:
<div id='myFirstMap' style="position:relative; width:500px; height:500px;">
</div>
After that we use a Button; when we click on the Button the traffic will be shown in the map:
<input type="button" value="ShowTrafficLayer"/>
The Output will be:
![BingMap1.jpg]()
After that now we write a function in the onload() method of the <body> tag:
<body onload="getMyMap();">
</body>
After that we write the function in JavaScript:
function getMyMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myFirstMap'),
{
credentials: 'AjOB1Xgle3udoFVOVQB2-5Gfba7VETkypBPHd2RAfkKrkb29wX3e9frf3TwdSoU1'
});
LoadTrafficModule();
}
Here we use the Bing Map Key as the credentials. And call the function LoadTrafficModule(). For this first we call this function:
function TrafficModule()
{
setMyMapView();
}
function setMyMapView()
{
map.setView({zoom: 10, center: new Microsoft.Maps.Location(40.73, -73.98)})
}
function LoadTrafficModule()
{
Microsoft.Maps.loadModule('Microsoft.Maps.Traffic',
{
callback: TrafficModule });
}
After that we call the function on the Button Click to show the traffic layer:
<input type="button" value="ShowTrafficLayer" onclick="showTrafficLayer();" />
function showTrafficLayer()
{
var MyTrafficLayer = new Microsoft.Maps.Traffic.TrafficLayer(map);
MyTrafficLayer.show();
}
Output:
![BingMap2.jpg]()
We can also set the Opacity in the Traffic Layer in the Bing Maps.
For this, first we use a Button to show the Opacity:
<input type="button" value="OpacityTrafficLayer" onclick="OpacityInTrafficLayer();" />
After that, we will write the js function:
function OpacityInTrafficLayer()
{
var tileLayer = trafficLayer.getTileLayer();
tileLayer.setOptions( {opacity: 0.1} );
}
Here we set the opacity.
Output
![BingMap3.jpg]()
Complete program for Opacity:
<html>
<head>
<title>Traffic Layer Opacity In Bing Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="My.js"></script>
<script type="text/javascript"> var map = null; var trafficLayer; function TrafficModule() { SetMapView(); showTrafficLayer(); } function LoadTrafficModule() { Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', { callback: TrafficModule }); } function SetMapView() { map.setView({ zoom: 10, center: new Microsoft.Maps.Location(40.73, -73.98) }) } function getMyMap() { map = new Microsoft.Maps.Map(document.getElementById('myFirstMap'), { credentials: 'AjOB1Xgle3udoFVOVQB2-5Gfba7VETkypBPHd2RAfkKrkb29wX3e9frf3TwdSoU1' }); LoadTrafficModule(); } function showTrafficLayer() { SetMapView(); trafficLayer = new Microsoft.Maps.Traffic.TrafficLayer(map); trafficLayer.show(); } function OpacityInTrafficLayer() { var tileLayer = trafficLayer.getTileLayer(); tileLayer.setOptions({ opacity: 0.1 }); } </script>
</head>
<body onload="getMyMap();">
<div id='myFirstMap' style="position: relative; width: 500px; height: 500px;">
</div>
<div>
<input type="button" value="OpacityTrafficLayer" onclick="OpacityInTrafficLayer();" />
</div>
<div id='output'>
</div>
</body>
</html>