Using with ASP.NET (VB.NET) - 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 > VB_NET > BasicExample folder.

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

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="BasicArrayURL.aspx.vb" 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.vb builds the map XML and renders the map:

Imports InfoSoftGlobal 'FusionCharts.dll in bin folder

Partial Class BasicArrayExample_DataURL
Inherits System.Web.UI.Page

'''<summary>This Function will Help to Generate US Map.</summary>
Protected Sub Page_Load(ByVal ob As Object, ByVal e As EventArgs) Handles Me.Load

     ' Define DataURL
     Dim DataURL As String
   ' DataURL that will relay Map XML
     DataURL = "WorldPopulationData.aspx"

     'Create the Map with data contained in DataURL
     'and Return HTML output that embeds the Map
     'We use FusionCharts class of InfoSoftGlobal namespace (FusionCharts.dll in BIN folder)
     'RenderChart() generated the necessary HTML needed to render the map
     Dim mapHTML As String = FusionCharts.RenderChart("../Maps/FCMap_World8.swf", DataURL, "", "mapid", "600", "400", False, False)

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

End Sub

End Class

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="VB" %>
<script runat="server">

'This Page will Generate Map XML when it's called as DataURL
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

     '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
   Dim dataArray(7, 2) As String
     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 combination XML.
     ' We convert using string concatenation.
     ' strXML - Stores the entire XML
     Dim strXML As 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>")

     Dim i As Integer
     ' Use Data from array for each entity
     For i = dataArray.GetLowerBound(0) To dataArray.GetUpperBound(0)
       ' Set each map <entity> id and value
        strXML.Append("<entity id='" & dataArray(i, 0) & "' value='" & dataArray(i, 1) & "' />")
    Next

    ' 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())

End Sub

</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: