ThinkGeo.com    |     Documentation    |     Premium Support

Full size map disappeared after adding update panel

#1

Hi,


I use HTML below to display full size map (100%). 




    
        
             
        
        
             
            <cc1:map id="Map1" width="100%" runat="server" height="100%"></cc1:map>
        
    


I've deleted DOCTYPE definition and can see the map. But when I added UpdatePanel the map disappeared again.


How can I use full size map with updatepanel? Also, I use some jquery plugin that requires DOCTYPE. Is any way to have full size map with update panel and doctype?


 


    [table width="100%" height="100%" border="1"}

      [tr width="100%" height="5%"}

            [td colspan="2"}

            [/td}

        [/tr}

        [tr width="100%" height="95%" valign="top"}

            [td width="15%" height="100%"}

            [/td}

            [td width="85%" height="100%"}

                [cc1:Map ID="Map1" runat="server" Height="100%" Width="100%"}

                [/cc1:Map}

            [/td}

            [/tr}

      [/table}


 


Thanks,


Igor 



#2

Hi Again, 
  
 I replaced ‘table’ with ‘div’ but still cannot see the map untile I delete DOCTYPE. How can I get full size map(width=100%, height=100%) without deleting DOCRTYPE. Could you please provide me with right HTML. Below is mine 
  
  
 {div style=“background-color:Aqua;”} 
 TOP 
 {/div} 
 {div style=“width:10%;float:left;background-color:Yellow;”} 
 LEFT 
 {/div} 
 {div style=“float:left; display: block; width: 90%; background-color: Maroon;”} 
     {cc1:Map id=“Map1” width=“100%” height=“100%” runat=“server”} 
     {/cc1:Map} 
 {/div} 
  
 {div style=“clear: both;”/}

#3

Hello Igor,


I just modify your code and make a little changes, could you please try this:



<form id="form1" runat="server">
    <table width="100%" height="100%" border="1">
        <tr width="100%" height="5%">
            <td colspan="2">
            </td>
        </tr>
        <tr width="100%" height="95%" valign="top">
            <td width="15%" height="100%">
            </td>
            <td width="85%" height="100%">
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <cc1:Map ID="Map1" runat="server" Height="100%" Width="100%">
                </cc1:Map>
            </td>
        </tr>
    </table>
    </form>

Regards,


Gary



#4

Hi Gary, 
  
 Thank you for you reply. I tried it, but it didn’t help. I can create map with width=100%, but I have to set height in pixel.  
  
 Maybe it is better to use javascript? 
  


#5

Hello Igor,


In particular, you mentioned that you wants to be able to keep the DOCTYPE declaration on your page and still have the map display at 100% height.  In order for that to work, a height must be explicitly set on every parent element of the map, including the ,  and any <form>> tags.  So his HTML would have to look something like this example:



<html style="height:100%;">
<head>
</head>
<body style="height:100%;">
      <form style="height:100%;">
            <table style="height:100%;">
                  <tr style="height:5%;">
                        <!--Header-->
                  </tr>
                  <tr style="height:95%;">
                        <td style="height:100%;">
                              <cc1:Map ID="Map1" runat="server" Height="100%" Width="100%"></cc1:Map>
                        </td>
                  </tr>
            </table>
      </form>
</body>
</html>

Of course you can specify those widths in his CSS style sheet instead of in-line on the tags like that.


That’s assuming you wants to use 100% height on every element.  If he can set a fixed pixel height on some element along the way, then I think the 100% height would only have to be specified on the children of that fixed-height element.


The reason is that, in standards-compliance mode, the browser has to answer the question “100% of what?” and the only element it implicitly knows the height of is the browser window itself.  In quirks mode, the browser will just take a guess, which is why the map usually will show up at 100% if you take the DOCTYPE out.


Also since you mentioned that he already has jQuery in your project, if you needs total precision over the size of your map, you can also use jQuery to calculate the exact pixel size of the map’s containing element and then apply that size to the map itself at runtime.  The calculations could be updated each time the browser is resized, or when elements on the screen change position, by calling a JavaScript function.




Regards,


Gary



#6

Thank a lot, Gary! I set height 100% for update panel and it works!

#7

Hello Igor, 
  
 You are welcome, don’t hesitate to let us know your problems. 
  
 Regards, 
  
 Gary

#8

Hello Igor, 
  
 You are welcome, don’t hesitate to let us know your problems. 
  
 Regards, 
  
 Gary