Drilldown Maps using Google Geomap in ASPNet

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

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

[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

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

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

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

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