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

Drilldown Maps using Google Geomap in ASP.Net

Author:Mudassar Khan


<< Part I - Google Geomap Visualization API in ASP.Net


In my previous article I explained how to use Google Geomap API in ASP.Net to create interactive Flash Maps. Here I’ll explain how one can create Drilldown maps using Google Geomap API and jQuery in ASP.Net

This article is a continuation of the first part thus if you are new reader please refer the previous article to get the complete understanding


Google Geomap Visualization API in ASP.Net

Drilldown or Zoom In

Now when user clicks on a country we’ll zoom in or drilldown into the more detailed information for that country by showing the statistics for each city

For displaying the City data I have created another Data Transfer Object or Property class called cities

 

C#

public class Cities

{

    string _City;

    int _Popularity;

    public string City

    {

        get

        {

            return _City;

        }

        set

        {

            _City = value;

        }

    }

 

    public int Popularity

    {

        get

        {

            return _Popularity;

        }

        set

        {

            _Popularity = value;

        }

    }

}

 

VB.Net

Public Class Cities

    Private _City As String

    Private _Popularity As Integer

    Public Property City() As String

        Get

            Return _City

        End Get

        Set(ByVal value As String)

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

 

 

Also we’ll need to create another Web Method that will handle the jQuery request when user clicks on any Country Thus I have created another method called GetCities

C#

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

[WebMethod]

public static List<Cities> GetCities(string CountryCode)

{

    List<Cities> cities = new List<Cities>();

 

    cities.Add(new Cities());

    cities[0].City = "Mumbai";

    cities[0].Popularity = 900;

   

    cities.Add(new Cities());

    cities[1].City = "Delhi";

    cities[1].Popularity = 800;

 

    cities.Add(new Cities());

    cities[2].City = "Kolkata";

    cities[2].Popularity = 750;

 

    cities.Add(new Cities());

    cities[3].City = "Chennai";

    cities[3].Popularity = 700;

 

    return cities;

}

 

VB.Net

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

<WebMethod()> _

Public Shared Function GetCities(ByVal CountryCode As String) As List(Of Cities)

   Dim cities As New List(Of Cities)()

 

   cities.Add(New Cities())

   cities(0).City = "Mumbai"

   cities(0).Popularity = 900

 

   cities.Add(New Cities())

   cities(1).City = "Delhi"

   cities(1).Popularity = 800

 

   cities.Add(New Cities())

   cities(2).City = "Kolkata"

   cities(2).Popularity = 750

 

   cities.Add(New Cities())

   cities(3).City = "Chennai"

   cities(3).Popularity = 700

 

   Return cities

End Function

 

As you can notice above the function accepts a parameter CountryCode that is passed to it by the method that does the jQuery AJAX call which will be discussed later in this article. Based on the Country Code the method will return the cities list.

 

Drawing the world map

 

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

 

The OnLoad method as the name suggests is called up when the Google visualization package is loaded in the client browser. It simply calls the CreateWorldMap method server side and on the success of the AJAX call the DrawWorldMap is executed.

Below is the DrawWorldMap client side function same as the previous article but with two differences

<script type='text/javascript'>

var countryCode;

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

 

    google.visualization.events.addListener(

    geomap, 'regionClick', function(e) {

        countryCode = e['region'];

        DrillDown();

    });

}

</script>

 

First thing I have declared public variable countryCode that will store the Country Code of the Country on which the user clicks. Second is the regionClick event that is attached to the World map which returns the country code when the map is clicked by a user. As you’ll notice I am calling a function called DrillDown described below

  

<script type='text/javascript'>

    function DrillDown() {

      $.ajax({

          type: "POST",

          url: "CS.aspx/GetCities",

          data: '{CountryCode: "' + countryCode + '"}',

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

          dataType: "json",

          success: CreateCountryMap

       });

    }

</script>

 

The above function simply makes an AJAX call to the Webpage and calls the GetCities method and passes the parameter countryCode which is initialized when user clicks on any part of the map. As you’ll notice the CreateCountryMap function is called when the AJAX call is successful. The method is described below

<script type='text/javascript'>

    function CreateCountryMap(response) {

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

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

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

      data.addRows(response.d.length);

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

          data.setValue(i, 0, "'" + response.d[i].City + "'");

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

      }

      var options = {};

      options['region'] = countryCode;

      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors

      options['dataMode'] = 'markers';

      options['showZoomOut'] = true;

 

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

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

      geomap.draw(data, options);

      google.visualization.events.addListener(

      geomap, 'zoomOut', function(e) {

      OnLoad();

      });

    }

</script>

 

The CreateCountryMap method simply loops through the cities JSON Array and populates the Google Visualization Datatable and finally draws the world map on the Canvas i.e. DIV  with id map_canvas. One important thing is in Zoom Out event handler I am again calling the OnLoad method so that user can again get back to the world map.

  

Below are the screenshots

  

World Map


Using Google Geomap Visualization API in ASP.Net


DrillDown Country Map with Zoom Out facility


DrillDown from Countries to Cities Google Geomap using ASP.Net and jQuery



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.


Hope you found this article interesting. You can download the related source in VB.Net and C# using the link below.

GoogleGeoMapsDrillDown.zip (26.94 kb)


<< Part I - Google Geomap Visualization API in ASP.Net


Posted: Sep 04 2009, 03:21 by Mudassar Khan | Comments (0) RSS comment feed |
Filed under: ASP.Net | C# | JQuery | VB.Net

Views: 6487
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