Controls in VE 3D

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


Copyright © 2002-2013 Soul Solutions Pty Ltd. | Login