Using data String Method | |||||||||||||||||||||
FusionMaps XT 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 XT using various methods in ASP.NET (VB). Even when used with ASP.NET (VB), FusionMaps XT internally uses JavaScript and XML/JSON to render the maps. The ASP.NET (VB) code actually helps you output this JavaScript and XML/JSON. To aid your understanding of this section, we will recommend you to go through the following sections of documentation (if you have not already read them):
In this section, we will show a few basic examples to help you get started. We'll cover the following examples here:
|
|||||||||||||||||||||
Setting up the map for use | |||||||||||||||||||||
Advanced Note - Using strongly named assembly : »
We are now providing strongly named assembly (FusionCharts) that you can put it into your GAC (Global Assembly Cache). Once you have added FusionCharts in GAC, you can directly refer to the assembly in your project without including it in the Bin folder of the project. This steps below describe how to add FusionCharts.dll in GAC and use it in your project:
Once done, you do not need to add a reference to FusionCharts.dll into your project. All you need to do is to use the InfoSoftGlobal namespace (using InfosoftGlobal;). NOTE: If you have multiple versions of FusionCharts.dll in the GAC, make sure to re-reference to the 3.2.2.1 version of FusionCharts.dll through your project properties or web.config. Existing users: Use of FusionMaps.dll is deprecated. Use FusionCharts.dll instead. However, after upgrading to FusionMaps XT, your existing implementations using FusionMaps.dll will continue to work without any problem. |
|||||||||||||||||||||
Sample: Using Data String method | |||||||||||||||||||||
|
|||||||||||||||||||||
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 XT 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" %> | |||||||||||||||||||||
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 BasicArray.aspx.vb builds the map XML and renders the map: |
|||||||||||||||||||||
Imports InfoSoftGlobal FusionCharts.dll in bin folder Partial Class BasicArrayExample_dataXML ''' <summary>This Function will Help to Generate US Map.</summary> ' Declare array entity to store world population 'Store population data 'Now, we need to convert this data into XML. 'Initialize <map> element 'Set Color ranges : 4 color ranges for population ranges 'Open data element that will store map data 'Use Data from array for each entity 'close data element 'Create the Map with data contained in strXML 'embed the map rendered as HTML into Literal - WorldPopulationMap |
|||||||||||||||||||||
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 Specification Sheet to know the Internal IDs for each map in FusionMaps XT. | |||||||||||||||||||||
Dim dataArray(7,2) As Object 'Store population data |
|||||||||||||||||||||
Next, we defined a variable strXML to store the entire XML data in a StringBuilder object. |
|||||||||||||||||||||
'Declare strXML to store Data String of the map |
|||||||||||||||||||||
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 'Use Data from array for each entity 'close data element |
|||||||||||||||||||||
We called the function renderChart() from FusionCharts. 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 'embed the map rendered as HTML into Literal - WorldPopulationMap |
|||||||||||||||||||||
InfosoftGlobal assembly has a class, FusionCharts, that contains the function RenderChart(). This function helps us create the map simply by passing few parameters in a predefined sequence. RenderChart() function accepts the following parameters in the same order as they are presented below: | |||||||||||||||||||||
|
|||||||||||||||||||||
Note that you can also use RenderChartHTML() method with same parameters. Unlike RenderChart() 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. Advanced note : FusionCharts.dll provides a namespace called InfoSoftGlobal. This namespace provides a class FusionCharts with a number of static methods. One of the static methods is RenderChart which we have used in the code above. Apart from the RenderChart()method, FusionCharts.dll provides a number of other static public methods (listed below) to ease your implementation.
|