How to get traffic data using Bing Map API in js
I need to display traffic status in Toronto using Bing Map. The goal is to show the traffic status when I choose one route on a web page. And the result should be text. Is there anyway to achieve this?
That's what I have so far,
var map = null;
GetMap(43.643718, -79.388785, 10);
function GetMap(latitude, longitude, zoomLevel) {
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "Bing code",
zoom: zoomLevel
});
map.setView({
center: new Microsoft.Maps.Location(latitude, longitude)
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
draggable: true
});
map.entities.push(pushpin);
// Add a handler to the pushpin drag
Microsoft.Maps.Events.addHandler(pushpin, 'mouseup', DisplayLoc);
map.entities.push(pushpin);
map.setView({
zoom: 10,
center: new Microsoft.Maps.Location(43.643718, -79.388785)
})
Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', {
callback: function() {
trafficLayer = new Microsoft.Maps.Traffic.TrafficLayer(map);
// show the traffic Layer
trafficLayer.show();
}
});
}
function CallGetMap() {
var latitude = parseInt(document.getElementById('txtLatitude').value);
var longitude = parseFloat(document.getElementById('txtLongitude').value);
var zoomLevel = parseFloat(document.getElementById('txtZoomLevel').value);
GetMap(latitude, longitude, zoomLevel);
}
function DisplayLoc(e) {
if (e.targetType == 'pushpin') {
var pinLoc = e.target.getLocation();
alert("The location of the pushpin is now " + pinLoc.latitude + ", " + pinLoc.longitude);
}
}
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<form id="form1" runat="server">
<div style="float:left;">
<span style="margin-right:100px;">Latitude</span>
<span style="margin-right:100px;">Longitude</span>
<span style="margin-right:100px;">Zoom Level</span>
</div>
<div style="clear:both;" />
<div style="float:left;margin-bottom:20px;">
<input id="txtLatitude" type="text" />
<input id="txtLongitude" type="text" />
<input id="txtZoomLevel" type="text" />
<input id="Button1" type="button" value="button" onclick="CallGetMap();" />
</div>
<div style="clear:both;" />
<div id="myMap" style="position:relative; width:2000px; height:2000px;">
</div>
</form>
source to share
The following example works, I made only two changes:
1- I have set up a valid Bing map key (with app url: http://stacksnippets.net/js ) you can get one form here .
2- I have set a delay between callback loadModule
and trafficManager.show()
.
In the chrome console, I could see that the traffic API requests did not send the key correctly, getting it 401 (Unauthorized)
as a response.
As you can see in the image below, &key={key}
it seems incomplete. I am guessing this is a bug, or the initialization workflow is wrong. No matter the delay, fix the problem.
Unlike a delayed request, the key appears to be correct.
var map = null;
GetMap(43.243718, -79.388785, 11);
function GetMap(latitude, longitude, zoomLevel) {
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: 'AsI529bayR--zjFnbPx2sl4yGScTrovaNNLsGPR9TxgcrUjFBpoqwKsxYtz9jPnS',
zoom: zoomLevel
});
map.setView({
center: new Microsoft.Maps.Location(latitude, longitude)
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
draggable: true
});
map.entities.push(pushpin);
// Add a handler to the pushpin drag
Microsoft.Maps.Events.addHandler(pushpin, 'mouseup', DisplayLoc);
map.entities.push(pushpin);
map.setView({
zoom: zoomLevel,
center: new Microsoft.Maps.Location(latitude, longitude)
})
Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', {
callback: function() {
trafficLayer = new Microsoft.Maps.Traffic.TrafficLayer(map);
// show the traffic Layer
setTimeout(function() {
trafficLayer.show();
}, 1000);
}
});
}
function CallGetMap() {
var latitude = parseInt(document.getElementById('txtLatitude').value);
var longitude = parseFloat(document.getElementById('txtLongitude').value);
var zoomLevel = parseFloat(document.getElementById('txtZoomLevel').value);
GetMap(latitude, longitude, zoomLevel);
}
function DisplayLoc(e) {
if (e.targetType == 'pushpin') {
var pinLoc = e.target.getLocation();
alert("The location of the pushpin is now " + pinLoc.latitude + ", " + pinLoc.longitude);
}
}
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<form id="form1" runat="server">
<div style="float:left;">
<span style="margin-right:100px;">Latitude</span>
<span style="margin-right:100px;">Longitude</span>
<span style="margin-right:100px;">Zoom Level</span>
</div>
<div style="clear:both;" />
<div style="float:left;margin-bottom:20px;">
<input id="txtLatitude" type="text" />
<input id="txtLongitude" type="text" />
<input id="txtZoomLevel" type="text" />
<input id="Button1" type="button" value="button" onclick="CallGetMap();" />
</div>
<div style="clear:both;" />
<div id="myMap" style="position:relative; width:2000px; height:2000px;">
</div>
</form>
source to share