Positioning Problems

[Glenn]

It is difficult to come up with a concise description of the problems I am having with maps.

 

First, I have a page that has both FustionCharts objects as well as a FusionMap object. This is a dashboard and is formatted so that each section of content is enclosed with a box. I started out having problems getting the boxes formatted around both the charts and the maps. For the charts the top and sides of the box would display (if I made the div wide enough) but not the bottom. I finally discovered that if I put:

 

<br /> <br />

 

under each chart the bottom of the box will display. This is not a perfect solution as it leaves more space below the chart than I want. But at least it works.

 

However, with maps it matters not how wide or how long I make the divisions that generate the boxes FusionMap will not allow the box to be drawn on the sides or the bottom. In addition where ever I put the map any positioning I have attempted to control goes out the window. I started out using css floats and relative positioning and that turned out to be a total disaster. So I reverted back to the traditional solution of breaking the page up with a table and positioning content in that fashion. Everything works great except when I try to put the map where my owner wants it.

 

I am using tiles which allows me to break up the jsps and modularize the code. I really like that. Here is the jsp code representing my first attempt at controlling the map using html tables:

 

<table cellpadding="0" cellspacing="10" border="0">
<tr valign="top">
<td>
	<jsp:directive.include file="/pages/common/intro.jsp"/>
	<jsp:directive.include file="/charts/barChart_IndustryTypeSummary.jsp"/>
</td>
<td>
	<jsp:directive.include file="/pages/common/whyLMA.jsp"/>
</td>
<td>
	<jsp:directive.include file="/charts/pieChart_ProjectTypeSummary.jsp"/>
	<jsp:directive.include file="/charts/mapUSTotalProjectValue.jsp"/>
</td>
</tr>
</table>

The module that produces the map is "/charts/mapUSTotalProjectValue.jsp". In this layout everything went where it was supposed to except that there is no box around the map. My owner was ok with that for now just to get to the first major milestone of the project.

 

Then he asked that the map go above the "/charts/pieChart_ProjectTypeSummary.jsp". So I moved it above that as in the following:

 

<table cellpadding="0" cellspacing="10" border="0">
<tr valign="top">
<td>
	<jsp:directive.include file="/pages/common/intro.jsp"/>
	<jsp:directive.include file="/charts/barChart_IndustryTypeSummary.jsp"/>
</td>
<td>
	<jsp:directive.include file="/pages/common/whyLMA.jsp"/>
</td>
<td>
	<jsp:directive.include file="/charts/mapUSTotalProjectValue.jsp"/>
	<jsp:directive.include file="/charts/pieChart_ProjectTypeSummary.jsp"/>
</td>
</tr>
</table>

So now the US map is above the chart. However, the chart overlays the map. So I added a table within a table to more separate the two maps in the right column as in the following code:

 

<table cellpadding="0" cellspacing="10" border="0">
<tr valign="top">
<td>
	<jsp:directive.include file="/pages/common/intro.jsp"/>
	<jsp:directive.include file="/charts/barChart_IndustryTypeSummary.jsp"/>
</td>
<td>
	<jsp:directive.include file="/pages/common/whyLMA.jsp"/>
</td>
<td>
	<table cellpadding="0" cellspacing="10" border="0">
		<tr>
			<td>
				<jsp:directive.include file="/charts/mapUSTotalProjectValue.jsp"/>
			</td>
		</tr>
		<tr>
			<td>
				<jsp:directive.include file="/charts/pieChart_ProjectTypeSummary.jsp"/>
			</td>
		</tr>
	</table>
</td>
</tr>
</table>

There was no change. The bottom chart still overlays the map. The table formatting had no effect at all.

 

Here is the content of /charts//pieChart_ProjectTypeSummary.jsp

 

<div id="smBlue" style="width:425px;" >
<div class="box">
<div class="mr">
<div class="ml">
<div class="tr">
<div class="tl">
<h2>Values by Project Type</h2><br /><hr>
</div><!-- /#tl -->
</div><!-- /#tr -->
<div class="br">
<div class="bl">
<div >
<div id=cwdcChartCntnr005>Generating chart</div><br />
</div>
</div><!-- /#bl -->
</div><!-- /#br -->
</div><!-- /#ml -->
</div><!-- /#mr -->
</div><!-- /#box -->
</div><!-- /#smBlue -->
<script type="text/javascript"><!--
var cwdcChartVar005 = new FusionCharts( "/charts/Pie2D.swf","cwdcChartID005", "400", "300", "0", "1" );
cwdcChartVar005.setXMLUrl("projectTypeSumChartData.action?level=2");
cwdcChartVar005.render("cwdcChartCntnr005");
// -->
</script>

 

And this is the contents of /charts/mapUSTotalProjectVal.jsp

 

<div id="smBlue" style="width:425px; " >
<div class="box">
<div class="mr">
<div class="ml">
<div class="tr">
<div class="tl">
<h2>Values by State</h2>
<div style="width:300px; height:600px; margin-left:auto; margin-right:auto;">
<div id=cwdcMapCntnr003>Generating chart</div><br />
</div>
</div><!-- /#bl -->
</div><!-- /#br -->
</div><!-- /#ml -->
</div><!-- /#mr -->
</div><!-- /#box -->
</div><!-- /#smBlue -->
<script type="text/javascript"><!--
var cwdcMapVar003 = new FusionMaps("/maps/FCMap_USA.swf", "cwdcMapID003", 350, 225, "0", "0");
cwdcMapVar003.setDataURL("projectTotalUSMap.action?level=2");
cwdcMapVar003.render("cwdcMapCntnr003");
// -->
</script>

You can see where I attempted to set a height value for the enclosing division. This made no difference in the positioning of the other objects.

 

I will attempt to include an image of what is going on:

 

Here is the result of the first sample. Notice everything is visible except for the absence of the lines round the US map.

 

 

 

After my owner asked me to move the US Map to the top here is the result:

 

 

I MUST be able to put these objects on the web page as is appropriate to my design or FusionMaps is unusable.

 

What do I do to have the ability to place the map where I need to without screwing up the position of the other objects on the page?

[FusionCharts Support]

Hi,

 

Could you please try once using

cwdcMapVar003.setTransparent(false);

 

after

 var cwdcMapVar003 = new FusionMaps("/maps/FCMap_USA.swf", "cwdcMapID003", 350, 225, "0", "0");

[Glenn]

Hi,

 

Could you please try once using

cwdcMapVar003.setTransparent(false);

 

after

 var cwdcMapVar003 = new FusionMaps("/maps/FCMap_USA.swf", "cwdcMapID003", 350, 225, "0", "0");

 

Hi,

 

I appologize for taking so long to respond. The pressures of this development have kept me on other things. Now that other functionality is nearing completion I am receiving growing pressure to fix this issue. The map is to be the focal point of the dashboard yet I can't put it where I need to and it won't let me format it the way I need to.

 

I made the change as you suggested. There was no change. The chart that should be under the map on the page overlays the map instead. I have been tempted to forget about the enclosing box around the map but it is part of the theme of the dashboard.

 

I am still unable to put the map object inside a box on the page and put the box where I want. Will the map flash object not cooperate with CSS? Do I need to put something around the flash object that will keep it from overriding my CSS?

[FusionCharts Support]

Hi,

 

Considering the complexity of the positioning we would like to request you to send us a scaled down HTML+CSS+JavaScipt sample which can showcase your problem and which we can check and give suggestion on CSS.

 

Also you can share with us a live URL of the page which we can check.

[Glenn]

Hi,

 

Considering the complexity of the positioning we would like to request you to send us a scaled down HTML+CSS+JavaScipt sample which can showcase your problem and which we can check and give suggestion on CSS.

 

Also you can share with us a live URL of the page which we can check.

 

Sorry again for the huge delay. I am working 2 projects simultaneously and have had no time to put into resolving this. However, the new website is now in production even with the map problem. I am starting to get a lot of complaints from the owner about this issue.

 

This is a complex website with all the charts and other outputs generated dynamically. It would be very difficult to generate some sort of sample of this. It would certainly take more time than I have on my plate. Also, unfortunately, this part of the actual website is only available to the association members. Below is a screen print of the page on our test server. You can see where I have two regular charts that are bounded by the borders. The map on the lower right has the same html/css code surrounding it but it appears to cancel out the border. It does not matter how big I make the box that is supposed to surround the map. It will not display. And as you can see it overlaps the footer at the bottom. The entire body of the page is enclosed in a div. It should push the footer down. If anything else on the body is longer than the map it will push the footer down. It is like the flash module is totally separate from the rest of the page, causing the browser to exclude it from the positioning.

 

 

 

Also, I really wanted the map above the pie chart on the right. If I move the div containing the map to preceed the chart I get the result below. I have tried every thing to add space between the divs so it will work properly. So far I have been unable to get it working at all.