3D mode renders on top of the current frame of the browser. This mean that simply having a higher z-index makes no difference, your custom controls disappear underneath. To fix this you need to a “shim”. This is an iframe to house your control.
function addshim(el,sid) //add iframe shim
{
if (map.GetMapMode() == VEMapMode.Mode3D)
{
var s = document.createElement("iframe");
s.id = sid;
s.frameBorder = "0";
s.style.position = "absolute";
s.style.zIndex = "1";
s.style.top = el.offsetTop;
s.style.left = el.offsetLeft;
s.width = el.offsetWidth;
s.height = el.offsetHeight;
s.allowtransparency = "true";
s.scrolling="no";
s.className="Shim";
el.shimElement = s;
el.parentNode.insertBefore(s, el);
}
}
function removeshim(sid) //remove iframe shim
{
var msh = document.getElementById(sid);
if (msh!=null) msh.parentNode.removeChild(msh);
msh = null;
}
Then hook the change event from 2d to 3d and add or remove your shims:
function ChangeMode() //Change from 2d to 3d etc
{
if (map.GetMapMode() == VEMapMode.Mode3D)
{
addshim(document.getElementById("myCustomControl1"),"myCustomShim1");
addshim(document.getElementById("myCustomControl2"),"myCustomShim2");
}else
{
removeshim("myCustomShim1");
removeshim("myCustomShim2");
}
}
usage:
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(47.6, -122.33), 10 ,'h' ,false);
map.AttachEvent('oninitmode', ChangeMode);
}
Something wrong with the code? Correct it at the Virtual Earth WIKI
Support for Controls in 3D mode