Written by Well after searching and reading some articles on GEO-Map I found an article in which they have used the Json with static WEBMETHOD members but my problem was to display the records in GRIDVIEW which is not possible to bind the control inside the static WEBMETHOD then I created a following code and method through which I achieved my result so I thought why don’t make it an article on it and post it so it will be helpful for others too so, here the following code. Hope you will enjoy it.
*And I have created a database almost 252 countries and more than 4200+ states so you can edit if you found any mistake in it.
Click here download the Script.
Create a webform name default.aspx and paste the source code in it.
SOURCE CODE
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Untitled Page</title>
<script src=”scripts/jquery-1.3.2.min.js” type=”text/javascript”></script>
<script type=’text/javascript’ src=’http://www.google.com/jsapi’></script>
<script src=’http://maps.google.com/maps?file=api&v=2&key=ABCDEFG’ type=’text/javascript’></script>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:LinkButton ID=”lnk_reset_map” runat=”server” onclick=”lnk_reset_map_Click” Visible=”False”><< Back</asp:LinkButton>
<br />
<div id=”visualization” style=”width: 600px;” >
<asp:Literal ID=”drawing_map” runat=”server”></asp:Literal>
</div>
<asp:GridView ID=”GridView1″ runat=”server” CellPadding=”4″ ForeColor=”#333333″ GridLines=”None”>
<FooterStyle BackColor=”#990000″ Font-Bold=”True” ForeColor=”White” />
<RowStyle BackColor=”#FFFBD6″ ForeColor=”#333333″ />
<PagerStyle BackColor=”#FFCC66″ ForeColor=”#333333″ HorizontalAlign=”Center” />
<SelectedRowStyle BackColor=”#FFCC66″ Font-Bold=”True” ForeColor=”Navy” />
<HeaderStyle BackColor=”#990000″ Font-Bold=”True” ForeColor=”White” />
<AlternatingRowStyle BackColor=”White” />
</asp:GridView>
</form>
</body>
</html>
Now copy and paste the code
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Text;
public partial class _Default : System.Web.UI.Page
{
SqlConnection con;
SqlDataAdapter adp;
StringBuilder draw_map = new StringBuilder(); // for appending the string
protected void Page_Load(object sender, EventArgs e)
{
con = new SqlConnection();
con.ConnectionString = ConfigurationManager.ConnectionStrings["cnn"].ConnectionString;
if (con.State == ConnectionState.Closed)
{ con.Open(); }
con.Close();
if (IsPostBack == false)
{
INR_Map(); // calling world map.
if (Request.QueryString["country"] == null) // will check the country querystring
{ }
else
{
country(Request.QueryString["country"].ToString()); // calling and passing parameter to country method.
}
}
}
private void INR_Map() // method of world map
{
if (con.State == ConnectionState.Closed)
{ con.Open(); }
adp = new SqlDataAdapter(@”SELECT sum(Emp_data.Business) as Business, Emp_data.Country
FROM Countries INNER JOIN
Emp_data ON Countries.Country = Emp_data.Country
group by Emp_data.Country”, con);
DataTable dt = new DataTable();
adp.Fill(dt);
adp.Dispose();
GridView1.DataSource = dt;
GridView1.DataBind();
lnk_reset_map.Visible = false;
// Appending the string into draw_map StringBuilder variable.
draw_map.Append(@”<script type=’text/javascript’>
google.load(‘visualization’, ’1′, {packages: ['geomap']});
function drawVisualization() {
var data = new google.visualization.DataTable();”);
draw_map.Append(“data.addRows(” + dt.Rows.Count + “);”);
draw_map.Append(“data.addColumn(‘string’, ‘Country’);”);
draw_map.Append(“data.addColumn(‘number’, ‘Business Volume’);”);
for (int i = 0; i <= dt.Rows.Count – 1; i++)
{
draw_map.Append(“data.setValue(” + i + “, 0, ‘” + dt.Rows[i]["Country"] + “‘);”); //set your column values here.
draw_map.Append(“data.setValue(” + i + “, 1, ” + dt.Rows[i]["Business"] + “);”);
}
draw_map.Append(@” var options = {};
// following for all regions
options['dataMode'] = ‘regions’;
var geomap = new google.visualization.GeoMap(
document.getElementById(‘visualization’));
google.visualization.events.addListener(
geomap, ‘regionClick’, function(e) {
window.location.href = ‘Default.aspx?country=’ + e['region'];
‘<a href=Default.aspx?country=’ + e['region'] + ‘></a>’
});
geomap.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
“);
drawing_map.Text = draw_map.ToString();
con.Close();
}
private void country(string cntry) // display country with states values.
{
if (con.State == ConnectionState.Closed)
{
con.Open();
}
adp = new SqlDataAdapter(@”
SELECT Emp_data.Country, Countries.Ab, Emp_data.State, sum(Emp_data.Business) as Business
FROM Countries INNER JOIN
Emp_data ON Countries.Country = Emp_data.Country
where Countries.Ab=@Country
group by Countries.Ab, Emp_data.Country, Emp_data.State”, con);
adp.SelectCommand.Parameters.AddWithValue(“@Country”, cntry);
DataTable dt = new DataTable();
adp.Fill(dt);
adp.Dispose();
GridView1.DataSource = dt;
GridView1.DataBind();
lnk_reset_map.Visible = true;
// Appending the string into draw_map StringBuilder variable.
draw_map.Append(@”<script type=’text/javascript’>
google.load(‘visualization’, ’1′, {packages: ['geomap']});
function drawVisualization() {
var data = new google.visualization.DataTable();”);
draw_map.Append(“data.addRows(” + dt.Rows.Count + “);”);
draw_map.Append(“data.addColumn(‘string’, ‘Country’);”);
draw_map.Append(“data.addColumn(‘number’, ‘Business Volume’);”);
for (int i = 0; i <= dt.Rows.Count – 1; i++)
{
draw_map.Append(“data.setValue(” + i + “, 0, ‘” + dt.Rows[i]["state"] + “‘);”); //set your column values here.
draw_map.Append(“data.setValue(” + i + “, 1, ” + dt.Rows[i]["Business"] + “);”);
}
draw_map.Append(“var options = {};”);
draw_map.Append(“options['region'] = ‘” + cntry + “‘;”); // passing country code here.
// following you can set the markers and color for the Map.
draw_map.Append(@”options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
options['dataMode'] = ‘markers’;
options['showZoomOut'] = false;
var geomap = new google.visualization.GeoMap(
document.getElementById(‘visualization’));
google.visualization.events.addListener(
geomap, ‘regionClick’, function(e) {
//set the querystring value for region
‘<a href=Default.aspx?val=’ + e['region'] + ‘></a>’
});
geomap.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
“);
drawing_map.Text = draw_map.ToString();
con.Close();
}
protected void lnk_reset_map_Click(object sender, EventArgs e)
{
Response.Redirect(“Default.aspx”); // to reset the world map
}}
OUT PUT
with regards
vik
Recent Comments