Map Sizing

[omegnman]

I'm using V3 maps and they do not always maintain there sizing after a page refresh or after I return to the page later in my session and an entity attribute has changed (e.g. color change). They do occupy the same space but appear zoomed and cropped.

One of the maps that I'm using is the "FCMap_USA.swf" with W = 580 and H = 356.

Is there anything I can do to prevent this? I have demonstrated this problem with several different browsers.

Thanks,

Edited November 20, 2007 by Guest

[omegnman]

Should this question be placed in the Bug section?

[Pallav]

Hi,

 

 

 

Can you please email us the code at [email protected]?

[omegnman]

Acknowledged. I will send code at first chance.

[mbaith]

I am having the same problem with the charts not sizing correctly. Was there a fix?

I was working on setting up a sample to send to [email protected], but it only seems to happen if the map is on the page with other charts/gadgets.

If it is on the page by itself, it works correctly. (See MapGood.gif)

If it is on a page with other charts/gadgets it will intermittently show correctly, but most of the time it doesn't scale down the map to fit correctly. (See MapBad.gif).

Any ideas?

Edited February 18, 2008 by Guest

[Pallav]

Hi,

 

 

 

Can you post the HTML code (as attachment) that you're using to embed the map?

[mbaith]

I copied the code for the map to a page by itself, but it doesn't have the same problem on this page. See attached.

MapCode.txt

Edited February 27, 2008 by Guest

[mbaith]

Here is the code on the page when the map scales correctly:

 <!-- START Script Block for Chart myNext11 -->

 <div id='myNext11Div' align='center'>

Chart.

 

 </div>

 

 <script type="text/javascript"> 

//Instantiate the Chart 

var chart_myNext11 = new FusionCharts("Maps/FCMap_USA.swf", "myNext11", "440", "254", "0", "0");

 

//Provide entire XML data using dataXML method

chart_myNext11.setDataXML("<map showShadow='1' showBevel='1' showLegend='0' showLabels='0' showMarkerLabels='0' includeNameInLabels='0' showCanvasBorder='0' fillColor='F1f1f1' borderColor='000000' hoverColor='999999' baseFont='Verdana' baseFontSize='10' markerBgColor='FF5904' legendPosition='bottom' useHoverColor='1' showToolTip='1' showMarkerToolTip='0' formatNumberScale='0' mapLeftMargin='1' mapRightMargin='1' mapTopMargin='1' mapBottomMargin='1'><data><entity id='CA' color='FF0000'  /><entity id='NV' color='FF0000'  /></data></map>");

 

//Finally, render the chart.

chart_myNext11.render("myNext11Div");

 </script> 

 <!-- END Script Block for Chart myNext11 -->

Here is the code on the page when the map doesn't scale correctly:

 <!-- START Script Block for Chart myNext11 -->

 <div id='myNext11Div' align='center'>

Chart.

 

 </div>

 

 <script type="text/javascript"> 

//Instantiate the Chart 

var chart_myNext11 = new FusionCharts("Maps/FCMap_USA.swf", "myNext11", "440", "254", "0", "0");

 

//Provide entire XML data using dataXML method

chart_myNext11.setDataXML("<map showShadow='1' showBevel='1' showLegend='0' showLabels='0' showMarkerLabels='0' includeNameInLabels='0' showCanvasBorder='0' fillColor='F1f1f1' borderColor='000000' hoverColor='999999' baseFont='Verdana' baseFontSize='10' markerBgColor='FF5904' legendPosition='bottom' useHoverColor='1' showToolTip='1' showMarkerToolTip='0' formatNumberScale='0' mapLeftMargin='1' mapRightMargin='1' mapTopMargin='1' mapBottomMargin='1'><data><entity id='CA' color='FF0000'  /><entity id='NV' color='FF0000'  /></data></map>");

 

//Finally, render the chart.

chart_myNext11.render("myNext11Div");

 </script> 

 <!-- END Script Block for Chart myNext11 -->

Looks the same to me... Any ideas?

[Pallav]

Both look the same to me too. Is there a possibility you can share a live URL with us?

[avalera]

I'm having the same problem. Can you solve it?

 

 

 

 

 

I notice that when you render the map using the RenderChartHTML, the sizing is OK, but when you use RenderChar there is the problem

 

 

 

Regards

Edited April 7, 2008 by Guest

[Pallav]

Please do not use renderChart - instead there's renderMap function for FusionMaps.

[mbaith]

Per Pallav's suggestion I changed my code to the following and it fixed the problem...

<%
strXML17 = "<your XML>"
%>
 <div id="mapdiv1" align="center"> 
    FusionMaps. </div>
    <script type="text/javascript">
   var map1 = new FusionMaps("Maps/FCMap_USA.swf", "Map1Id1", "440", "254", "0", "0");
   map1.setDataXML("<%=strXML17%>");	 
   map1.render("mapdiv1");
 </script>

[suan.ngaihte]

Dear Pallav,

 

 

 

I also face the same sizing problem. Please see the code for generating and rendering the map and please help me if there is any solution.

 

 

 

Code To Render:

 

 

 

public static string RenderChart(string chartSWF, string strURL, string strXML, string chartId, string chartWidth, string chartHeight, bool debugMode, bool registerWithJS)

 

{

 

strXML = strXML.Replace("&", "and");

 

StringBuilder builder = new StringBuilder();

 

builder.AppendFormat("&lt!-- START Script Block for Chart {0} --&gt" + Environment.NewLine, chartId);

 

builder.AppendFormat("&ltdiv id='{0}Div' align='left'&gt" + Environment.NewLine, chartId );

 

builder.Append("Chart." + Environment.NewLine);

 

builder.Append("&lt/div&gt" + Environment.NewLine);

 

builder.Append("&ltscript type="text/javascript"&gt" + Environment.NewLine);

 

builder.AppendFormat("var chart_{0} = new FusionCharts("{1}", "{0}", "{2}", "{3}", "{4}", "{5}");" + Environment.NewLine, chartId, chartSWF, chartWidth, chartHeight, boolToNum(debugMode), boolToNum(registerWithJS));

 

 

 

if (strXML.Length == 0)

 

{

 

builder.AppendFormat("chart_{0}.setDataURL("{1}");" + Environment.NewLine, chartId, strURL);

 

}

 

else

 

{

 

builder.AppendFormat("chart_{0}.setDataXML("{1}");" + Environment.NewLine, chartId, strXML);

 

}

 

 

 

 

 

builder.AppendFormat("chart_{0}.render("{1}Div");" + Environment.NewLine, chartId, chartId);

 

builder.Append("&lt/script&gt" + Environment.NewLine);

 

builder.AppendFormat("&lt!-- END Script Block for Chart {0} --&gt" + Environment.NewLine, chartId);

 

return builder.ToString();

 

}

 

----------------------------------------------------------------------------------------------------

 

 

 

Code to Create the XML Data:

 

public string DisplayChartBasicWithClubs(string powerMapType, DataTable iTable, string parameterColumn)

 

{

 

//*** Create an XML data document in a string variable

 

StringBuilder xmlData = new StringBuilder();

 

 

 

xmlData.Append("&ltmap fillcolor='99CCFF' showToolTip='0' animation='0' showShadow='0' showBevel='0' showLegend='0' showLabels='0' showMarkerLabels='1' " +

 

" borderColor='000000' baseFont='Verdana' baseFontSize='10' " +

 

" markerBorderColor='000000' markerBgColor='FF5904' markerRadius='3' legendPosition='bottom' useHoverColor='0' showMarkerToolTip='1' &gt");

 

 

 

xmlData.Append("&ltmarkers&gt");

 

 

 

xmlData.Append("&ltdefinition&gt");

 

 

 

foreach(DataRow myRow in iTable.Rows)

 

{

 

xmlData.Append("&ltmarker id='" + myRow["ID"].ToString() + "' x='" + myRow["X"].ToString() + "' y='" + myRow["Y"].ToString() + "' label='" + myRow["Name"].ToString() + "' color='00ff00' labelPos='"+ GetTextAlignment(myRow["TextAlignId"].ToString()) +"' /&gt");

 

}

 

xmlData.Append("&lt/definition&gt");

 

 

 

xmlData.Append("&ltapplication&gt");

 

 

 

foreach(DataRow myRow in iTable.Rows)

 

{

 

xmlData.Append("&ltmarker id='" + myRow["ID"].ToString() + "' shapeId='circle' link='" + HttpUtility.UrlEncode(new Link().ClubInformationLink(myRow[parameterColumn].ToString())) + "' /&gt");

 

}

 

xmlData.Append("&lt/application&gt");

 

 

 

xmlData.Append("&lt/markers&gt");

 

xmlData.Append("&lt/map&gt");

 

 

 

//*** loopthrought datatable rows

 

/*foreach(DataRow dr in iTable.Rows)

 

{

 

//*** append xml string to add a label, value and colour for each row

 

xmlData.Append("&ltset label='" + dr[0].ToString() + "' value='" + dr[1].ToString() + "' " + colours[1].ToString() + " /&gt");

 

}*/

 

 

 

//*** close chart tag

 

//xmlData.Append("&lt/chart&gt");

 

 

 

return RenderChart(powerMapsPath + "FCMap_" + powerMapType + ".swf", "", xmlData.ToString(), graphName, graphWidth, graphHeight, graphDebug, false);

 

}

 

----------------------------------------------------------------------------------------------------------------

 

 

 

Code which calls for creating the map:

 

 

 

private void ViewCountry(int[] compIDs, string countryID)

 

{

 

DataSet iSet = new DataSet();

 

DbHelper.FillFromSql(iSet, string.Format(@"Select Name

 

From Country

 

Where PowerMapID = '{0}'", countryID));

 

 

 

DataTable iTable;

 

if (compIDs.Length == 0)

 

{

 

iTable = new PowerMap().GetClubPositioningByCountry(countryID);

 

}

 

else

 

{

 

iTable = new PowerMap().GetClubsForCompetition(compIDs[0].ToString(), countryID);

 

for (int i = 1; i < compIDs.Length; i++)

 

{

 

DataTable tmpTable = new PowerMap().GetClubsForCompetition(compIDs.ToString(), countryID);

 

foreach(DataRow dr in tmpTable.Rows)

 

{

 

iTable.Rows.Add(dr.ItemArray);

 

}

 

}

 

}

 

 

 

 

 

foreach(DataRow myRow in iTable.Rows)

 

{

 

myRow[iTable.Columns.Count-1] = "clubid=" + myRow["ID"].ToString();

 

}

 

 

 

powerMapsChart.Text = new PowerMap().DisplayChartBasicWithClubs(iSet.Tables[0].Rows[0][0].ToString(), iTable, "ParameterColumn");

 

 

 

iSet.Dispose();

 

}

 

 

 

 

 

 

 

Please find the attachment and kindly help me.

 

 

 

 

 

Thanks

Edited August 6, 2008 by Guest