Earthware Blog

Ok, so I was using the new asp.net Virtual Earth map control and looking to size it to have a 100% width and height. Like many of you out there I was experiencing the problem that I could only seem to apply the 100% width. As soon as I tried to apply the 100% height the control was not visible when the page loaded.

Well, we here at Earthware have continued to work at the problem and have managed to come up with a solution. If you put the map control within a div which is positioned absolute and has a height and width of 100% itself, then you should see it works as required. See below…

<div style="position:absolute;width:100%;height:100%;">
    <ve:Map ID="Map1" runat="server" Height="100%" Width="100%"

    ZoomLevel="4" onserverloadmap="Map1_ServerLoadMap"

    OnClientLoadMap="Map1_ClientLoadMap"

    OnClientResize="Map1_ClientLoadMap" />
</div>

However, as always things are not quite that simple!! From what we can see this works in Internet Explorer 7 and Firefox 3, but not in earlier versions of these browsers. We’ve therefore come up with a semi fix for this. If you set the height and width using the Map.Resize method in the code behind then this works on initial page load. We’ve used some javascript and hidden fields in the code in front to get the correct height and width, as below…

CODE IN FRONT:

<script type="text/javascript">
 function Map1_ClientLoadMap(sender, e)
 {
     if (document.documentElement &&

        (document.documentElement.clientWidth ||

         document.documentElement.clientHeight))
     {
       //For the fix for IE 6 and Firefox versions less than 3
       $get("clientwidth").value = document.documentElement.clientWidth;
       $get("clientheight").value = document.documentElement.clientHeight;
     }
 }
</script>

CODE BEHIND:

protected void Map1_ServerLoadMap(object sender, EventArgs e)
{
    ResizeMap();
}

private void ResizeMap()
{
    if (Request.Browser.Type == "IE6" ||

       (Request.Browser.Browser == "Firefox" &&

        Request.Browser.MajorVersion < 3))
    {
        Map1.Resize(Convert.ToInt16(clientwidth.Value), 

                    Convert.ToInt16(clientheight.Value));
    }
}

Unfortunately at this time we cannot get the resize events to work (the Resize event only fires if you manually resize the control, not if you resize the browser window) but do check back again soon as we are continuing to work on this.

Please download an example of a working case to of all of the above in action.

This entry was posted on Friday, August 29th, 2008 at 11:00 am and is filed under ASP.Net, Microsoft Virtual Earth. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.