In May several Updates have been released to the Bing Maps AJAX Control v7 which Keith Kinnan has summarized here. Possibly the most significant one is the ability to dynamically load additional modules.
GeoRSS-Feed
<rss xmlns:georss=”http://www.georss.org/georss” version=”2.0″>
<channel>
<title>Microsoft London</title>
<link>http://www.bing.com/maps</link>
<description />
<language>en-gb</language>
<item>
<title>Microsoft</title>
<link>http://www.bing.com/maps/?cid=42E1F70205EC8A96!14501</link>
<description>Cardinal Place, 100 Victoria Street, London, SW1E 5JL</description>
<guid isPermaLink=”false”>e7aea3b0d2e1c7b8</guid>
<pubDate>Fri May 27 22:37:13 UTC 0100 2011</pubDate>
<georss:polygon>51.49673999638715 -0.14145107778161137 51.496997150067386 -0.1394555142745313 51.49772184808794 -0.1397022775039014 51.497568226428456 -0.1408288052901563 51.49676003438838 -0.1414403489455518 51.49673999638715 -0.14145107778161137</georss:polygon>
</item>
<item>
<title>Victoria</title>
<link>http://www.bing.com/maps/?cid=42E1F70205EC8A96!14501</link>
<description>Underground Station</description>
<guid isPermaLink=”false”>b03dc79bd7bdb81e</guid>
<pubDate>Fri May 27 22:37:39 UTC 0100 2011</pubDate>
<georss:point>51.49644610469038 -0.14391334565724278</georss:point>
</item>
<item>
<title>Walk from Victoria to Cardinal Place</title>
<link>http://www.bing.com/maps/?cid=42E1F70205EC8A96!14501</link>
<description>180m</description>
<guid isPermaLink=”false”>bf8ee4e437813477</guid>
<pubDate>Fri May 27 22:38:24 UTC 0100 2011</pubDate>
<georss:line>51.496643145923684 -0.14391334565724278 51.496506219055234 -0.14225574048603917 51.49657969206017 -0.1415208152159586 51.4967199583771 -0.14146180661763097</georss:line>
</item>
</channel>
</rss>
The Website
<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=7.0″></script>
<script type=”text/javascript”>
var map = null;
var MM = Microsoft.Maps;
var options = { credentials: “YOUR BING MAPS KEY”,
enableClickableLogo: false,
enableSearchLogo: false,
mapTypeId: Microsoft.Maps.MapTypeId.road,
center: new MM.Location(51.4611794944098, -0.9259434789419174),
zoom:17 };
map = new MM.Map(document.getElementById(‘mapDiv’), options);
}
</script>
</head>
<body onload=”GetMap();”>
<div id=’mapDiv’ style=’position:relative; width:800px; height:600px;’></div><br />
<a>GeoRSS-Feed</a><input id=”txtGeoRSS” type=”text” value=”MSFT_London.xml” />
<input id=”Button2″ type=”button” value=”Import” onclick=”LoadModule()” />
</body>
</html>
// Register and load a new module
MM.registerModule(“GeoRSSModule”, “./GeoRSSModule.js”);
MM.loadModule(“GeoRSSModule”, { callback: ModuleLoaded });
}
The Module
var myFillColor = new Microsoft.Maps.Color(100,255,165,0);
var myStrokeColor = new Microsoft.Maps.Color(200,255,165,0);
var myStrokeThickness = 5;
strokeColor: myStrokeColor,
strokeThickness: myStrokeThickness};
var myPolylineOptions={strokeColor: myStrokeColor,
strokeThickness: myStrokeThickness};
Microsoft.Maps.Pushpin.prototype.description = null;
Microsoft.Maps.Polyline.prototype.title = null;
Microsoft.Maps.Polyline.prototype.description = null;
Microsoft.Maps.Polyline.prototype.anchorLat = null;
Microsoft.Maps.Polyline.prototype.anchorLon = null;
Microsoft.Maps.Polygon.prototype.title = null;
Microsoft.Maps.Polygon.prototype.description = null;
Microsoft.Maps.Polygon.prototype.anchorLat = null;
Microsoft.Maps.Polygon.prototype.anchorLon = null;
map.entities.clear();
xmlhttp.open(“GET”, MyFeed, false);
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;
var allLocs = new Array()
var childNodeCount = xmlDoc.getElementsByTagName(“item”)[i].childNodes.length;
var tagName = null;
var geomType = null;
var geom = null;
var myTitle = null;
var myDesc = null;
var anchorLat = null;
var anchorLon = null;
for (j = 0; j <= childNodeCount – 1; j++) {
tagName = xmlDoc.getElementsByTagName(“item”)[i].childNodes[j].nodeName;
if (tagName in { ‘georss:point’: ”, ‘georss:line’: ”, ‘georss:polygon’: ” }) {
geomType = tagName;
geom = xmlDoc.getElementsByTagName(“item”)[i].childNodes[j].childNodes[0].nodeValue;
}
else if (tagName == “title”) {
try {
myTitle = xmlDoc.getElementsByTagName(“item”)[i].childNodes[j].childNodes[0].nodeValue;
}
catch (err) {
}
}
else if (tagName == “description”) {
try {
myDesc = xmlDoc.getElementsByTagName(“item”)[i].childNodes[j].childNodes[0].nodeValue;
}
catch (err) {
}
}
}
var coords = new Array();
coords = geom.split(” “);
var thisLocs = new Array()
if ((coords.length/2) % 2) {
anchorCoord = coords.length / 2-1;
}
else {
anchorCoord = coords.length / 2;
}
var thisLoc = new Microsoft.Maps.Location(coords[k], coords[k + 1]);
thisLocs.push(thisLoc);
allLocs.push(thisLoc);
anchorLat = coords[k];
anchorLon = coords[k + 1];
}
}
switch (geomType) {
case “georss:point”:
shape = new Microsoft.Maps.Pushpin(thisLocs[0]);
break;
case “georss:line”:
shape = new Microsoft.Maps.Polyline(thisLocs, myPolylineOptions);
shape.anchorLat = anchorLat;
shape.anchorLon = anchorLon;
break;
case “georss:polygon”:
shape = new Microsoft.Maps.Polygon(thisLocs, myPolygonOptions);
shape.anchorLat = anchorLat;
shape.anchorLon = anchorLon;
break;
}
shape.title = myTitle;
shape.description = myDesc;
map.entities.push(shape);
}
}
}
Back to the Website
// Use the function provided by the newly loaded module
var myModule = new GeoRSSModule(map);
myModule.ImportGeoRSS(document.getElementById(“txtGeoRSS”).value);
collectionInfoBox = new MM.EntityCollection;
map.entities.push(collectionInfoBox);
}
<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=7.0″></script>
<script type=”text/javascript”>
var map = null;
var MM = Microsoft.Maps;
var infobox = null;
var collectionInfoBox = null;
var options = { credentials: “YOUR BING MAPS KEY”,
enableClickableLogo: false,
enableSearchLogo: false,
mapTypeId: Microsoft.Maps.MapTypeId.road,
center: new MM.Location(51.4611794944098, -0.9259434789419174),
zoom:17 };
map = new MM.Map(document.getElementById(‘mapDiv’), options);
MM.Events.addHandler(map, ‘viewchange’, hideInfobox);
}
// Register and load a new module
MM.registerModule(“GeoRSSModule”, “./GeoRSSModule.js”);
MM.loadModule(“GeoRSSModule”, { callback: ModuleLoaded });
}
// Use the function provided by the newly loaded module
var myModule = new GeoRSSModule(map);
myModule.ImportGeoRSS(document.getElementById(“txtGeoRSS”).value);
collectionInfoBox = new MM.EntityCollection;
map.entities.push(collectionInfoBox);
}
function showInfoBox(e) {
if (e.targetType == “pushpin”) {
collectionInfoBox.clear();
infobox = new MM.Infobox(e.target.getLocation(), { title: e.target.title, description: e.target.description, offset: new MM.Point(0, 30), visible: true });
collectionInfoBox.push(infobox);
}
else if (e.targetType == “polygon” || e.targetType==”polyline”) {
collectionInfoBox.clear();
infobox = new MM.Infobox(new MM.Location(e.target.anchorLat, e.target.anchorLon), { title: e.target.title, description: e.target.description, offset: new MM.Point(0, 0), visible: true });
collectionInfoBox.push(infobox);
}
}
try {
infobox.setOptions({ visible: false });
}
catch (err) {
}
}
</script>
</head>
<body onload=”GetMap();”>
<div id=’mapDiv’ style=’position:relative; width:800px; height:600px;’></div><br />
<a>GeoRSS-Feed</a><input id=”txtGeoRSS” type=”text” value=”MSFT_London.xml” />
<input id=”Button2″ type=”button” value=”Import” onclick=”LoadModule()” />
</body>
</html>
Tip: Importing Bing Maps Collections in your own Website