The current documentation on MSDN (http://msdn.microsoft.com/en-us/library/bb412435.aspx) outlines how to create shims (IFRAME wrapper) for HTML elements over the bing map to appear in 3D. We'll be taking this a further step to understand exactly what limitations the shim imposes and how this applies to pop-ups.
Going into 3D mode creates an ActiveX control on top of the Bing map container which causes all HTML elements underneath it to be hidden. Therefore you won't be able to put any <div> or <img> tags on top of the map when the user switches to 3D mode (although I've noticed flash player movies will appear over the ActiveX control) just by using VEMap.AddControl alone. The MSDN documentation suggests wrapping a shim (IFRAME) around your elements as a workaround. You should also note the following:
- You need to make the call to VEMap.AddControl after the map has switched to 3D mode and every time in order for Firefox to render properly.
- Transparencies will not work
The transparency limitation is quite evident when you add a shim over the entire map container. Try running this sample code below in 3D:
<!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.2"></script>
<script type="text/javascript">
var map = null;
var i = 0;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.AttachEvent("onchangeview", OnChangeView)
}
function OnChangeView()
{
if(map.GetMapMode() == VEMapMode.Mode3D)
{
addShim(document.getElementById('myMap'));
/* Uncomment this and remove addShim line above in order to see transparent pin issue
var el = document.createElement("div");
el.id = "myControl" + i;
el.style.top = 200 + (i * 10) + "px";
el.style.left = 200 + (i * 10) + "px";
el.innerHTML = "<img src='http://dev.virtualearth.net/mapcontrol/v6.2/i/bin/6.2.2008082210001.41/pins/poi_usergenerated.gif'/>";
map.AddControl(el);
addShim(el);
counter.value = i;
i++;*/
}
}
function addShim(el)
{
var shim = document.createElement("iframe");
shim.id = "myShim" + i;
shim.frameBorder = "0";
shim.style.position = "absolute";
shim.style.zIndex = "1";
shim.style.top = el.offsetTop + "px";
shim.style.left = el.offsetLeft + "px";
shim.width = el.offsetWidth + "px";
shim.height = el.offsetHeight + "px";
el.shimElement = shim;
el.parentNode.insertBefore(shim, el);
}
</script>
</head>
<body onload="GetMap();" style="font-family:Arial;font-size:x-small">
<div id='myMap' style="position: relative; width: 400px; height: 400px;">
</div>
Switch to 3D mode to see some shim examples
</body>
</html>
Figure 1. Shim applied to entire map container in 3D mode
What's going on here is that the shim workaround actually makes the 2D portion beneath the ActiveX control visible. Any transparencies that you use beneath images, divs will be filled in with the 2D map using the shim trick. Pop-up customization such as beak images, rounded corners will have to be removed from 3D as you're forced to stick within the confines of rectangle boxes that are not transparent. This also explains why the default pop-up doesn't render the beak in 3D. However it's okay if you paint a non-transparent (e.g: white) background in the main <div> container and then overlay a transparent image behind it (image transparency will work then).
If you remove the comments and delete the addShim on the MyMap container from the sample code above you will see a transparent image being affected. If you look carefully at the pushpin, you will see the transparency being replaced by the 2D map beneath.
Figure 2. Shim applied to empty <div> containing a pushpin image that has transprency
Also, opacity will not work in 3D, as evident in the default 3D dashboard (notice it's all one color, no handling of opacity for mouse over unlike 2D). You'll have to be very careful when designing for 2D and 3D compatibility.
Summary:
- Render controls in 3D using a shim after the map has switched modes
- Transparencies will not work in 3D, Create controls within non-transparent background rectangles for 3D
- Opacity will not work in 3D
Microsoft has finally released documentation on how to use their VE 3D API here:
http://blogs.msdn.com/virtualearth3d/archive/2009/01/25/documentation.aspx
I'm definately looking forward to placing some objects and animated pushpins on the map. Thanks Microsoft!