Technology

Virtual Earth Control 100% height problem - Solved! Well almost

Anthony Marshall
Anthony Marshall
29 Aug 2008
blog post featured image
<p>Ok, so I was using the new <a href="http://www.microsoft.com/downloads/details.aspx?FamilyId=D7C6DF11-2283-4CAC-9723-172F5C33EFBB&amp;displaylang=en">asp.net Virtual Earth map control</a> and looking to size it to have a 100% width and height. <a href="http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=3779196&amp;SiteID=1">Like many of you out there</a> 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.</p> <p>Well, we here at <a href="http://www.earthware.co.uk">Earthware</a> 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...</p> <pre class="code"><span style="color: blue">&lt;</span><span style="color: #a31515">div </span><span style="color: red">style</span><span style="color: blue">=&quot;position:absolute;width:100%;height:100%;&quot;&gt; &lt;</span><span style="color: #a31515">ve</span><span style="color: blue">:</span><span style="color: #a31515">Map </span><span style="color: red">ID</span><span style="color: blue">=&quot;Map1&quot; </span><span style="color: red">runat</span><span style="color: blue">=&quot;server&quot; </span><span style="color: red">Height</span><span style="color: blue">=&quot;100%&quot; </span><span style="color: red">Width</span><span style="color: blue">=&quot;100%&quot;</span></pre> <pre class="code"><span style="color: blue"> </span><span style="color: red">ZoomLevel</span><span style="color: blue">=&quot;4&quot; </span><span style="color: red">onserverloadmap</span><span style="color: blue">=&quot;Map1_ServerLoadMap&quot;</span></pre> <pre class="code"><span style="color: blue"> </span><span style="color: red">OnClientLoadMap</span><span style="color: blue">=&quot;Map1_ClientLoadMap&quot;</span></pre> <pre class="code"><span style="color: blue"> </span><span style="color: red">OnClientResize</span><span style="color: blue">=&quot;Map1_ClientLoadMap&quot; /&gt; &lt;/</span><span style="color: #a31515">div</span><span style="color: blue">&gt;</span></pre> <p><a href="http://11011.net/software/vspaste"></a></p> <p>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...</p> <p>CODE IN FRONT:</p> <pre class="code"><span style="color: blue">&lt;</span><span style="color: #a31515">script </span><span style="color: red">type</span><span style="color: blue">=&quot;text/javascript&quot;&gt; function </span>Map1_ClientLoadMap(sender, e) { <span style="color: blue">if </span>(document.documentElement &amp;&amp;</pre> <pre class="code"> (document.documentElement.clientWidth ||</pre> <pre class="code"> document.documentElement.clientHeight)) { <span style="color: green">//For the fix for IE 6 and Firefox versions less than 3 </span>$get(<span style="color: #a31515">&quot;clientwidth&quot;</span>).value = document.documentElement.clientWidth; $get(<span style="color: #a31515">&quot;clientheight&quot;</span>).value = document.documentElement.clientHeight; } } <span style="color: blue">&lt;/</span><span style="color: #a31515">script</span><span style="color: blue">&gt;</span></pre> <p><a href="http://11011.net/software/vspaste"></a><a href="http://11011.net/software/vspaste"></a></p> <p>CODE BEHIND:</p> <pre class="code"><span style="color: blue">protected void </span>Map1_ServerLoadMap(<span style="color: blue">object </span>sender, <span style="color: #2b91af">EventArgs </span>e) { ResizeMap(); } <span style="color: blue">private void </span>ResizeMap() { <span style="color: blue">if </span>(Request.Browser.Type == <span style="color: #a31515">&quot;IE6&quot; </span>||</pre> <pre class="code"> (Request.Browser.Browser == <span style="color: #a31515">&quot;Firefox&quot; </span>&amp;&amp;</pre> <pre class="code"> Request.Browser.MajorVersion &lt; 3)) { Map1.Resize(<span style="color: #2b91af">Convert</span>.ToInt16(clientwidth.Value), </pre> <pre class="code"> <span style="color: #2b91af">Convert</span>.ToInt16(clientheight.Value)); } }</pre> <p><a href="http://11011.net/software/vspaste"></a></p> <p>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.</p> <p>Please <a href="http://www.earthware.co.uk/downloads/VEControl_HeightFix.zip">download an example</a> of a working case to of all of the above in action.</p>
Close chatbot
Open chatbot
Open chatbot