Using with ASP.NET (C#) - Using Data URL Method

Using Data URL Method

In this section we will see how to render a map using Data URL method - where the XML data is created in a file other than what we use to generate the map. The page that contains the code to render the map is referred to as Map Container Page and the other one which creates the XML data is called Data Provider Page.

Let's look at the codes used in Map Container Page and Data Provider Page one by one.

Before proceeding further, we recommend to go through the documentation How FusionMaps XT works? for a better insight.

All code discussed here is present in Download Package > Code > CS_NET > BasicExample folder.

Map Container Page contains the following code. You can view this code in BasicArrayURL.aspx file.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BasicArrayURL.aspx.cs" Inherits="BasicArrayExample_DataURL" %>

<html>
<head>
     <title>FusionMaps XT Sample - Basic Example from array - Using Data URL</title>

     <script language="Javascript" src="../Maps/FusionCharts.js"></script>

</head>
<body>
    <form id='form1' name='form1' method='post' runat="server">

       <% //Generate World Map in WorldPopulationMap Literal Control %>
       <asp:Literal ID="WorldPopulationMap" runat="server" />

    </form>
</body>
</html>

In the above code, we first include FusionCharts.js file to enable us embed the map using JavaScript. The code behind script generates the map in the literal control WorldPopulationMap.

Let us see how code behind script in BasicMapsArrayURL.aspx.cs builds the map XML and renders the map:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
// Using FusionCharts.dll
using InfoSoftGlobal;

public partial class BasicArrayExample_DataURL : System.Web.UI.Page
{

///<summary>This Function will Help to Generate US Map.</summary>
protected void Page_Load(object sender, EventArgs e)
{
// Define Data URL
string DataURL;
// Data URL that will relay Map XML
DataURL = "WorldPopulationData.aspx";

// Create the Map with data contained in Data URL
// and Return HTML output that embeds the Map
// We use FusionCharts class of InfoSoftGlobal namespace (FusionCharts.dll in BIN folder)
// RenderChart() generates the necessary HTML needed to render the map
string mapHTML= FusionCharts.RenderChart("../Maps/FCMap_World8.swf", DataURL, "", "mapid", "600", "400", false, false);

//embed the map rendered as HTML into Literal - WorldPopulationMap
WorldPopulationMap.Text = mapHTML;

}
}

Steps involved in this code:

We include InfosoftGlobal assembly which will help embed the map easily
We declare a variable, DataURL that contains the name of the Data Provider Page (WorldPopulationData.aspx)
We pass DataURL to RenderChart() function provided by the FusionCharts class of InfosoftGlobal assembly
The XML is relayed and finally map is rendered in literal - WorldPopulationMap.

Now, let us see the code in Data Provider Page WorldPopulationData.aspx.

<%@ Page Language="C#" %>
<script runat="server">

// This Page will Generate Map XML when it's called as DataURL
protected void Page_Load(Object sender, System.EventArgs e)
{

     // Declare array entity to store world population
     // We use world map with 8 entities/continents
     // this 2 dimensional array will store 8 rows of data for each continent of the map
     // first column of each row will store the Internal Id of each entity on the map
     // second column will store population data of each entity

     string[,] dataArray = new string[8, 2];
     dataArray[0, 0] = "01";
     dataArray[0, 1] = "3779000000";
     dataArray[1, 0] = "02";
     dataArray[1, 1] = "727000000";
     dataArray[2, 0] = "03";
     dataArray[2, 1] = "877500000";
     dataArray[3, 0] = "04";
     dataArray[3, 1] = "421500000";
     dataArray[4, 0] = "05";
     dataArray[4, 1] = "379500000";
     dataArray[5, 0] = "06";
     dataArray[5, 1] = "80200000";
     dataArray[6, 0] = "07";
     dataArray[6, 1] = "32000000";
     dataArray[7, 0] = "08";
     dataArray[7, 1] = "179000000";

     // Now, we need to convert this data into XML.
     // We convert using string concatenation.
     // Declare strXML to store Data URL of the map
     StringBuilder strXML = new StringBuilder();

// Initialize <map> element
strXML.Append("<map showLabels='1' includeNameInLabels='1' borderColor='FFFFFF' fillAlpha='80' showBevel='0' legendPosition='Bottom' >");

     // Set Color ranges : 4 color ranges for population ranges
     strXML.Append("<colorRange>");
     strXML.Append("<color minValue='0' maxValue='100000000' displayValue='Population : Below 100 M' color='CC0001' />");
     strXML.Append("<color minValue='100000000' maxValue='500000000' displayValue='Population :100 - 500 M' color='DDD33A' />");
     strXML.Append("<color minValue='500000000' maxValue='1000000000' displayValue='Population :500 - 1000 M' color='069F06' />");
     strXML.Append("<color minValue='1000000000' maxValue='5000000000' displayValue='Population : Above 1000 M' color='ABF456' />");
     strXML.Append("</colorRange>");

// Open data element that will store map data
strXML.Append("<data>");

     // Use Data from array for each entity
     for (int i = 0; i < dataArray.GetLength(0); i++)
     {
        // Set each map <entity> id and value
        strXML.AppendFormat("<entity id='{0}' value='{1}' />", dataArray[i, 0], dataArray[i, 1]);
     }

     // close data element
     strXML.Append("</data>");
     // close map element
     strXML.Append("</map>");

// Set Proper output content-type
Response.ContentType = "text/xml";

     // Just write out the XML data
     // NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER
     Response.Write(strXML.ToString());

}

</script>

(Here we have used the same code for XML creation that we used in the Data String example.)

The Steps involved in this code

We declare a 2-dimensional array, dataArray, to store the population data and Internal IDs for 8 continents.
We store data in the array, the first column is used to store Internal IDs and the second column stores the population value of respective continents.
Then we declare a variable strXML to store the XML of this map.
After declaring the variable we set 4 color ranges to the strXML.
Then we store the data from the dataArray to strXML by iterating through dataArray.
Finally, we send this data to output stream without any HTML tags.

Here is the snap of the map: