ASP Snippets

Categories






Alerts

Free Alerts

Your email will always be
private and will not be shared.




Follow us on twitter.




Zoom In | Zoom Out


Author is awarded Most Valuable Professional award by Microsoft ASP/ASP.Net

Google Geomap Visualization API in ASP.Net

Author:Mudassar Khan


Part II - Drilldown Maps using Google Geomap in ASP.Net >>


In this article I am explaining how to use Google Geomap which is part of the Google Visualization API in an ASP.Net Application.  Google Geomap is a nice tool to display geographical statistics through interactive Flash maps

In this example I’ll make use of jQuery to asynchronously load the map with statistical data.

 

Perquisites

Download jQuery Library using the following link.

Download jQuery


Now add the following scripts to the head section of your Web page or Master Page.

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

 

Note: The API key is not required on localhost but when you upload it on server you’ll need to get one from Google otherwise it won’t work

Creating a DTO Class

Now I’ll create a DTO (Data Transfer Objects) Class called Countries whose object will store the statistical data for that country

 

C#

public class Countries

{

    string _Country;

    int _Popularity;

    public string Country

    {

        get

        {

            return _Country;

        }

        set

        {

            _Country = value;

        }

    }

 

    public int Popularity

    {

        get

        {

            return _Popularity;

        }

        set

        {

            _Popularity = value;

        }

    }

}

 

VB.Net

Public Class Countries

    Private _Country As String

    Private _Popularity As Integer

    Public Property Country() As String

        Get

            Return _Country

        End Get

        Set(ByVal value As String)

            _Country = value

        End Set

    End Property

 

    Public Property Popularity() As Integer

        Get

            Return _Popularity

        End Get

        Set(ByVal value As Integer)

            _Popularity = value

        End Set

    End Property

End Class

 

Populating the Data for Map

Now I’ll populate the data for the Map. First you’ll need to import the following namespaces

C#

using System.Collections.Generic;

using System.Web.Script.Services;

using System.Web.Services;

 

VB.Net

Imports System.Collections.Generic

Imports System.Web.Script.Services

Imports System.Web.Services

 

Next I have created a simple method that creates a List array of the Country class objects and returns the List array.

C#

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

[WebMethod]

public static List<Countries> CreateWorldMap()

{

    List<Countries> countries = new List<Countries>();

 

    countries.Add(new Countries());

    countries[0].Country = "India";

    countries[0].Popularity = 3000;

 

    countries.Add(new Countries());

    countries[1].Country = "United States";

    countries[1].Popularity = 2500;

 

    countries.Add(new Countries());

    countries[2].Country = "Russia";

    countries[2].Popularity = 2100;

 

    countries.Add(new Countries());

    countries[3].Country = "Canada";

    countries[3].Popularity = 1700;

 

    countries.Add(new Countries());

    countries[4].Country = "United Kingdom";

    countries[4].Popularity = 1600;

 

    countries.Add(new Countries());

    countries[5].Country = "France";

    countries[5].Popularity = 1200;

 

    return countries;

}

 

VB.Net

<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _

<WebMethod()> _

Public Shared Function CreateWorldMap() As List(Of Countries)

   Dim countries As New List(Of Countries)()

 

   countries.Add(New CountriesVB())

   countries(0).Country = "India"

   countries(0).Popularity = 3000

 

   countries.Add(New CountriesVB())

   countries(1).Country = "United States"

   countries(1).Popularity = 2500

 

   countries.Add(New CountriesVB())

   countries(2).Country = "Russia"

   countries(2).Popularity = 2100

 

   countries.Add(New CountriesVB())

   countries(3).Country = "Canada"

   countries(3).Popularity = 1700

 

   countries.Add(New CountriesVB())

   countries(4).Country = "United Kingdom"

   countries(4).Popularity = 1600

 

   countries.Add(New CountriesVB())

   countries(5).Country = "France"

   countries(5).Popularity = 1200

 

   Return countries

End Function

 

As you’ll notice I have declared the method as static (shared in VB.Net) so that it can be accessed using jQuery library. The jQuery AJAX function will simply call this function and receive the List array as JSON Array client side. Refer below to see how it works

 

Calling the Server side function using jQuery

 

<script type='text/javascript'>

    google.load('visualization', '1', {'packages': ['geomap']});

    google.setOnLoadCallback(OnLoad);

    function OnLoad() {

        $.ajax({

            type: "POST",

            url: "CS.aspx/CreateWorldMap",

            data: '{}',

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: DrawWorldMap

        });

    }

 </script>

 

As you’ll notice above I am calling OnLoad() function when the Google API is loaded. This function simply makes an AJAX call to the CreateWorldMap function which returns the List Array back to it. Once the response is received the success method DrawWorldMap is called which draws the Google Geomap using the statistical data received from the server.

Note: for more information on calling server side methods using jQuery refer my previous article using the link below

Check UserName Availability in ASP.Net using JQuery


Drawing the Google Geomap

<script type='text/javascript'>

    function DrawWorldMap(response) {

        var data = new google.visualization.DataTable();

        data.addRows(response.d.length);

        data.addColumn('string', 'Country');

        data.addColumn('number', 'Popularity');

        for (var i = 0; i < response.d.length; i++) {

            data.setValue(i, 0, response.d[i].Country);

            data.setValue(i, 1, response.d[i].Popularity);

        }

        var options = {};

        options['dataMode'] = 'regions';

 

        var container = document.getElementById('map_canvas');

        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);

    }

 </script>

 

Above I am accepting the response as parameter the response object contains the JSON Array. Next I am creating Google Visualization DataTable Object and creating two columns Country and Popularity. Country is a necessary column it will have either Country Code or Country Name which in case if incorrect the data for that entry will not be shown. Other parameters can be anything.

Then I am looping through the response object and adding rows in the datatable that we have created. Next a container object is created which is nothing much object reference of the HTML DIV Control which will act as a canvas for our map. Finally the draw method is called which simply renders the map in the map_canvas DIV.

<div id='map_canvas'></div>

 

Note: For this article I have used Visual Studio 2008. In order to use this functionality in Visual Studio 2005 you have to install AJAX Extensions and Add ScriptManager to the page. Also instead of response.d you’ll have to check for response for the returned values

The figure below displays the Google Geomap Visualization World Map being displayed on the asp.net Web Page


Using Google Geomap Visualization API in ASP.Net

The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.



You can download the sample source code in C# and VB.Net using the link below

GoogleGeoMaps.zip (25.32 kb)


Part II - Drilldown Maps using Google Geomap in ASP.Net >>



Posted: Aug 31 2009, 17:42 by Mudassar Khan | Comments (0) RSS comment feed |
Filed under: ASP.Net | C# | JQuery | VB.Net

Views: 6862
Page copy protected against web site content infringement by Copyscape


If you like this article, help us grow by bookmarking this page on any social bookmarking site.
Bookmark and Share





Comments









Community News





Web Hosting SpotLight


Consulting


For consulting and work related queries click here.



Advertise


Advertise with us. For more details click here.


Suggestions


Please provide your valuable suggesstions here.

This Site is hosted on

Lunarpages.com Web Hosting