ThinkGeo.com    |     Documentation    |     Premium Support

How to set Map Width and Height ClientSide

#1

Hi,



I have a Map control inside an EssentialObject Callpanel, that is inside an EssentialObject SplitterPane. When I resize the Splitter Pane, the Map does not resize with the pane. Any idea how I can achieve this Clientside before the Map is rendered. I know how to trap the PanelResize event but that is were I get stuck since it appears the I cannot assign a value to map.clientWidht or map.clientHeight (where var map = document.getElementById("Map1")).



Any help is greatly appreciated.



Thanks,

Chris



#2

Chris,


You can use the following code. also please have a look at the attached sample for detai.



var map = Map1.GetOpenLayersMap();
map.div.style.width = 1000;
map.div.style.height = 1000;

Thanks,


Ben



1222-Post6301zip.zip (93.2 KB)

#3

Ben, 
  
 Thanks - exactly what I was looking for - now if I can only determine what the "real" size of the panel is that contains the map. :) This panel is set to be width=100% and height=100% - that does not work for the map otherwise I would ahve done that from the start. 
  
 Cheers, 
 Chris

#4

Chris,


You can set the map to 100% if its parent nodes are also set to 100%. Please see the attached sample.


Thanks,


Ben



1226-Post6302.zip (6.17 KB)

#5

Ben, 



Alas - it does not work that way under IE8, Chrome, or FF 3.5 :(. I'm not sure what browser you used to test it with. On the mentioned browsers, it just shows a blank screen (essentially, the map has width and height of 0). 



I have found a way which seems to work reasonably well by using a combination of  

windows.onload = viewPort(); 

windows.onresize = viewPort(); 



and  


body onload="AdjustControls()"


where the viewPort() function gets the "viewport" of the browser and the "AdjustControls()" function adjust all the controls on the page to fit the viewport


Chris



#6

Chris, 
  
 Another way to implement that is pasting the following style on your aspx page. 
 html, body, form, div{height:100%; margin:0px;} 
  
 If possible please remove the DOCTYPE on the aspx page and try again. 
  
 If it still has the issue, please send us a sample and let us see if there is any style issue in your html code. 
  
 Let me know if you have any questions. 
  
 Thanks, 
 Howard