Hi,
I have a Map control inside a splitter. The splitter is set to have 100% of browser size and divide it accordingly for displaying titlebar on top and Map at bottom. During page load my map isnot occupying 100% width and height of the Container.
How can I set the map to occupy 100% width and height of its container?
Thanks,
Prava
Prava,
Maybe it’s caused by “DOCTYPE”. Please remove the line below from the “.aspx” file and have another try.
Also could you let us know which splitter you used? Ajax Control Toolkit or some others?
Thanks,
Johnny
Hi Johny,
Yes, I did try removing “DOCTYPE”. It didnot work either. I am using Telerik RadSplitter to divide browser into several components.
Thanks,
Prava
Prava,
Do you set he map’s width and height to 100%? Can you post your code on the forum?
Thanks,
Johnny
Hi,
Yes, I did set Height and width to 100%. I have attached my code and mark up.
Thanks
Prava
<u> </u>
//This is the MarkUp
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register assembly="WebEdition" namespace="ThinkGeo.MapSuite.WebEdition" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml" >
<head runat="server">
<title>Next Gen Web Browser</title>
<link href="MainPageStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="Button1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="MapDivSplitter" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Button2">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="MapDivSplitter" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%"
Width="100%" PanesBorderSize="0" BorderSize="0"
Orientation="Horizontal" Skin="Vista" LiveResize="true"
VisibleDuringInit="false" ResizeWithBrowserWindow="true" >
<telerik:RadPane ID="TitleBarPane" runat="server" Locked="true" Height="94px">
<asp:Image ID="logoImage" ImageUrl="theme/default/Logo.JPG" alt="Company Logo" runat="server" />
<asp:Image id="logoStretch" ImageUrl="theme/default/LogoStretch.JPG" alt="Fill Image" runat="server" Height="95px" Width="100%" />
</telerik:RadPane>
<telerik:RadSplitBar ID="TitleRadSplitBar" runat="server" />
<telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
<telerik:RadSplitter ID="ContentRadSplitter" runat="server" Skin="Vista" PanesBorderSize="0" BorderSize="0" >
<telerik:RadPane ID="LeftRadPane" runat="server" Width="230" BackColor="White" Scrolling="None">
<asp:Button ID="Button1" runat="server" Text="Display Second Image " onclick="Button1_Click"/>
<asp:Button ID="Button2" runat="server" Text="Hide Second Image " onclick="Button2_Click"/>
</telerik:RadPane>
<telerik:RadSplitBar ID="NavRadSplitBar" runat="server" CollapseMode="Forward" />
<telerik:RadPane ID="MapRadPane" runat="server" Scrolling="None" >
<telerik:RadSplitter ID="MapDivSplitter" runat="server" Orientation="Horizontal" Skin="Vista" LiveResize="true" VisibleDuringInit="false" PanesBorderSize="0" BorderSize="0" >
<telerik:RadPane ID="MapPane" runat="server" Scrolling="None" >
<cc1:Map ID="Map1" runat="server" Height="100%" Width="100%" >
</cc1:Map>
</telerik:RadPane>
<telerik:RadSplitBar ID="MapRadSplitBar" runat="server" CollapseMode="None" />
<telerik:RadPane ID="DataGridPane" runat="server" MinHeight="100" Height="130" Scrolling="Both" Collapsed="true">
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>
///This is The code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Data.SqlClient;
using System.Data;
using ThinkGeo.MapSuite.Core;
using ThinkGeo.MapSuite.WebEdition;
using System.Drawing;
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
openMap();
}
protected void Button1_Click(object sender, EventArgs e)
{
DataGridPane.Collapsed = false;
DataGridPane.Splitter.SplitBarsSize = 6;
MapRadSplitBar.CollapseMode = SplitBarCollapseMode.Both;
}
protected void Button2_Click(object sender, EventArgs e)
{
DataGridPane.Collapsed = true;
DataGridPane.Splitter.SplitBarsSize = 6;
MapRadSplitBar.CollapseMode = SplitBarCollapseMode.None;
}
void openMap()
{
string connectionString = "Data Source=MAPCOM071\SQLEXPRESS2008;Initial Catalog=Lakeland;Integrated Security=True";
MsSql2008FeatureLayer fsl = new MsSql2008FeatureLayer(connectionString, "msiOverview", "ID");
fsl.ZoomLevelSet.ZoomLevel01.DefaultLineStyle = LineStyles.Canal1;
fsl.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
fsl.Open();
RectangleShape currentExtent = fsl.GetBoundingBox();
fsl.Close();
fsl.Srid = 0;
Map1.StaticOverlay.Layers.Add(fsl);
Map1.MapUnit = GeographyUnit.Feet;
Map1.CurrentExtent = currentExtent;
Map1.BackColor = Color.DarkGoldenrod;
}
}
Do you have body,form {height:100%} somewhere?
Hi,
It seems that the 100% width works fine but height. We also tried placing a Asp:Panel where the map is, but the 100% height also doesn't work.
I'm not sure if there is something wrong with teleric spliter control, or some property should be set additionally. One should make sure all the parent controls of the map should be set width and height to 100%.
A workaround is that we can write the Javascript to get the height on the fly, and then change the map's height. If you want it, please let us know.
Thanks,
Johnny
Hi,
I tried using jquery to reset map size based on parent container, It worked fine with .net controls. Once I wrapped my map with RadSplitters, map gets zoomedOut to its highest level and map layer occupies small area in the top left hand corner. Rest of the container panel is then covered with map background. However after post back map size was set properly so, to solve my issue I used jquery to send ajax request to server with dummy button and document.ready( ).
It would be great if I could set my map width and height appropriately on page load without doing any postback. I have a user control with a map called "Map" and the map controls ID is "Map1". Initially I used javascipt as shown below to set map width and height based on browser.
window.onresize = this.ResizeMainPage;
$(document).ready(function() {
ResizeMainPage();
});
ResizeMainPage = function() {
cheight = document.documentElement.clientHeight;
cwidth = document.documentElement.clientWidth;
var titleHeight = $("#TitleBar").height();
var contentHeight = parseInt(cheight) - titleHeight;
$("#ContentBar").height(contentHeight);
$("#LeftBar").height(contentHeight);
$("#RightBar").height(contentHeight);
var NavWidth = $("#LeftBar").width();
var mapWidth = parseInt(cwidth) - NavWidth;
$("#RightBar").width(mapWidth);
$("#Map_Map1").width(mapWidth);
$("#Map_Map1").height(contentHeight);
$("#Map_Map1Container").width(mapWidth);
$("#Map_Map1Container").height(contentHeight);
}
Thanks
Prava
Hi Prava,
Please try the following code again:
$(document).ready(function() {
ResizeMainPage();
});
ResizeMainPage = function() {
var map = Map1.GetOpenLayersMap();
map.updateSize();
}
We tested the code, it works well. If you still have problems please let us know.
Thanks,
Johnny
Thanks a lot for your help. It resolved my issue.
Best regards,
Prava
Prava,
You are welcome. Please feel free to ask any questions.
Thanks,
Johnny