FusionMaps Documentation

FusionMaps with ASP.NET (VB) > Using dataXML Method

FusionMaps can effectively be used with Microsoft ASP.NET (VB) to plot data over geographic locations. In this section and the following, we'll show examples on how to plot data on FusionMaps using various methods in ASP.NET (VB).

We'll cover the following examples here:

Rendering map from array using dataXML Method.
Rendering map from array using dataURL Method.
Rendering map using Form based data and
Rendering drill-down maps pulling data from database.

Before proceeding further, we recommend to go through the documentation "How to use FusionMaps" for a better insight.

Here we will first declare an array and store data in it.
Then we will build the map XML by fetching data from the array.
Finally, we will relay the data in FusionMaps XML format to render the map.

The code discussed here is present in Download Package > Code > VB_NET > BasicExample folder.

We will be displaying the population of the continents using FusionMaps in this example. Here is the ASP code that has been used in the example.

Creating World Population Map from the data stored in an array

The code to create the world map with data from array is contained in BasicArray.aspx is listed as under :

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="BasicArray.aspx.vb" Inherits="BasicArrayExample_dataXML" %>
<html>
    <head>
      <title>FusionMaps Sample - Basic Example from array - Using dataXML</title>
      <script language="Javascript" src="../JSClass/FusionMaps.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 FusionMaps.js file to enable us embed the map using JavaScript. The code behind script generates the map in the litreral control WorldPopulationMap.

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

Imports InfoSoftGlobal 'FusionMaps.dll in bin folder

Partial Class BasicArrayExample_dataXML
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

     ' 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

    'Store population data
   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(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 dataXML of the map
      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>")

'Use Data from array for each entity
    Dim i As Integer
    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>")

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

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

   End Sub
End Class

Steps involved in this code

In this method, we define an array dataArray to store population data for 8 world regions. The array has two columns - first one for each region's/entity's Internal ID and the next one for population values.

Internal ID is a field which helps to identify each part of a map uniquely. Please go through the Map Specificaiton Sheet to know the Internal IDs for each map in FusionMaps.

Dim dataArray(7,2) As Object

'Store population data
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(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"

Next, we defined a variable strXML to store the entire XML data in a StringBuilder object.

'Declare strXML to store dataXML of the map
Dim strXML As New StringBuilder
'Initialize <map> element
strXML.Append("<map showLabels='1' includeNameInLabels='1' borderColor='FFFFFF' fillAlpha='80' showBevel='0'legendPosition='Bottom' >")

The following code is used to define the color range for the map entities. Different colors show different range of population. The first range is for the regions where population ranges from 0 to 100000000 and it is shown in Red. The second range is for the regions where population ranges from 100000000 to 500000000 and it is shown in Yellow. The third range is from 500000000 to 1000000000 in dark green and the fourth range is 1000000000 and above in light green color.

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

Next, we added the map data in <entity> elements by iterating through the array elements. We used for loop for this.

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

'Use Data from array for each entity
Dim i As Integer
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>")

We called the function renderMap() from FusionMaps. It generates the HTML and JavaScript necessary to render the map. Finally we set the generated HTML and JavaScript to the literal control - WorldPopulationMap.

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

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

InfosoftGlobal assembly has a class, FusionMaps, that contains the function renderMap(). This function helps us create the map simply by passing few parameters in a predefined sequence. renderMap() function accepts the following parameters in the same order as they are presented below:

Parameter	Description
mapSWF	SWF File Name (and Path) of the map which we want to plot. Here, we are plotting a World (having 8 continent segments) Map. So, we've specified it as ../../Maps/FCMap_World8.swf
strURL	If we use dataURL method to plot data over maps, we have to pass the URL as this parameter. Else, set it to "" (in case we use dataXML method). In this case, we're using data XML method, hence we kept it blank.
strXML	If we use dataXML method to plot data over maps, we have to pass the XML data as this parameter. Else, set it to "" (in case we are using of dataURL method). In this case, we're using dataXML method, hence we passed strXML through this field.
mapId	The ID for the map by which it will be recognized in the HTML page. If we use multiple maps on the same page, then all the maps should have unique mapId.
mapWidth	Intended width for the map (in pixels)
mapHeight	Intended height for the map (in pixels)
debugMode	Whether to start the map in debug mode. Please see "Debugging your Maps" section for more details on Debug Mode.
registerWithJS	Whether to register the map with JavaScript. Use this options when you want to update the map using JavaScript. Please see "FusionMaps and JavaScript" section for more on this option.
transparent	Whether the the chart should have a transparent background in HTML page. Optional Property.

Note that you can also use RenderMapHTML() method with same parameters. Unlike RenderMap() method which uses JavaScript embedding, this method uses HTML Embedding of Maps. This comes handy while using ASP.NET.AJAX UpdatePanel and other AJAX components.

Below is the screenshot of the map used for this example.