Have been working with telecom industries for a while now (But its not limited to telecom though it was suitable for them but it can be used for othe rverticals where projects are typically spread out), as pretty obvious thing visual representation strikes more than textual data, so i was thinking over how could i do so and make it interesting, and here came the thought why not show their project status with those beautiful little colorful indicator(marker) on the map representing their status , and i started writing a module to do that, now typically i should have chosen MS Virtual earth as a map, but instead my instinct said lets paly with google API, and i started exploring the options, i wasn’t familiar with much of the langauages other than Java Script and so i started of with Java Script, now the next problem was how do i integrate it with project server as PS API (Now in My Code i Simply used Data From RDB, you may want to extend it to ) interact using .NET code and Google map with Java, so i used the trivial method of building dynamic javascript and pass it to the ASP.NET Literal control to render, though i know it could have been done much better, but i leave that to you 🙂
So here goes my code
——————————————–Edit Default.aspx Source File to Include reference & Place Holder for JS—–
<%
@ 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 id=”Head1″ runat=”server”>
<title>Project Data on Map By Sunil </title>
<%–Google API reference–%>
<%–The Below Key should be replaced by a new one once it gets on production, it will work till its on Localhost–%>
<script src=”http://maps.google.com/maps?file=api&v=2&sensor=false&key=abcdefg” type=”text/javascript”></script>
</head>
<body onload=”initialize()” onunload=”GUnload()”>
<form id=”form1″ runat=”server”>
<asp:Panel ID=”Panel1″ runat=”server”>
<%–ASP Literal Control – Place holder to fill with javascript by server side code–%>
<asp:Literal ID=”js” runat=”server”></asp:Literal>
<div id=”map_canvas” style=”width: 100%; height: 728px; margin-bottom: 2px;”></div>
<br />
</asp:Panel>
</form>
</body>
</html>
———–Pretty Simple Right —————————————————-
Now Move Onto Default.aspx.cs file and paste the code
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.Sqlclient;
public partial class _Default : System.Web.UI.Page
{ protected void Page_Load(object sender, EventArgs e)
{
DataTable dtbl = new DataTable();
DataColumn myDataColumn;
myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType(“System.String”);
myDataColumn.ColumnName = “Latitude”;
dtbl.Columns.Add(myDataColumn);
myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType(“System.String”);
myDataColumn.ColumnName = “Longitude”;
dtbl.Columns.Add(myDataColumn);
/*Now the below Lat & Long are just for demo purpose, you may replace it with a web service
(there are plety of them freely available) which will map location name with lat long and in turn can
be used to map your project status on map, you should give people a project custom field which will give
them option to selct location, and that should be mapped to the lat & long */
DataRow dr;
dr = dtbl.NewRow();
dr[0] = “28.616667”;
dr[1] = “77.216667”;
dtbl.Rows.Add(dr);
DataRow dr1;
dr1 = dtbl.NewRow();
dr1[0] = “17.2”;
dr1[1] = “78.3”;
dtbl.Rows.Add(dr1);
//////////////////////Get PS RDB Data///////////////////////
System.Text.StringBuilder NewTextBuilder = new System.Text.StringBuilder();
string ConnStr = “Data Source=ServerName;Initial Catalog=ReportingDB;User Id=UserName;Password=password”;
System.Data.SqlClient.SqlConnection Conn = new SqlConnection(ConnStr);
string Query = @”SELECT [ProjectName],[FileName],PlannedEndDate], [ProjectID],[Theme], [PlannedStartDate] FROM [ReportingDB].[MSP_EPMProject_USerView]”;
SqlCommand Cmd = new SqlCommand(Query);
Cmd.Connection = Conn;
SqlDataAdapter Da = new SqlDataAdapter(Cmd);
Da.Fill(Ds);
BuildScript(dtbl,Ds);
}
private void BuildScript(DataTable tbl,DataSet Ds)//Pass Data Table containing Latitude/Longitude(mandatory to plot map marker – Project level Custom Field) //and Other Parameters From Project RDB as many as you like
{ int i = 0;
/////////////////The Below mentioned icons can be replaced with your custom icons/////////////////
string GreenIcon = @http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png;
string RedIcon = @http://gmaps-samples.googlecode.com/svn/trunk/markers/red/blank.png;
string OrangeIcon = @http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/blank.png;
string PinkIcon = @http://gmaps-samples.googlecode.com/svn/trunk/markers/pink/blank.png;
string BlueIcon = @http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png;
foreach (DataRow r in tbl.Rows)
{
int ProjectStatus = i;
String MarkerText = Ds.Tables[0].Rows[i][0].ToString();//@”Project Status”; // This Should be replaced with dynamic Project Data, whatever you want to display
// Should be used for Passing Project Status Based on Custom Calculation
// bypass empty rows
if (r[“Latitude”].ToString().Trim().Length == 0)
continue;
string Latitude = r[“Latitude”].ToString();
string Longitude = r[“Longitude”].ToString();
NewTextBuilder.Append(Environment.NewLine);
NewTextBuilder.Append(” var point” + i + ” = new GLatLng(” + Latitude + “,” + Longitude + “); “);
NewTextBuilder.Append(Environment.NewLine);
NewTextBuilder.Append(Environment.NewLine);
NewTextBuilder.Append(“var Plot” + i + “Icon = new GIcon(G_DEFAULT_ICON);”);
NewTextBuilder.Append(Environment.NewLine);
NewTextBuilder.Append(“markerOptions = { icon:Plot”+ i +”Icon };”);
if (ProjectStatus == 0) { NewTextBuilder.Append(” Plot” + i + “Icon.image = ‘” + RedIcon + @”‘; “); }
if (ProjectStatus == 1) { NewTextBuilder.Append(” Plot” + i + “Icon.image = ‘” + GreenIcon + @”‘; “); }
if (ProjectStatus == 2) { NewTextBuilder.Append(” Plot” + i + “Icon.image = ‘” + OrangeIcon + @”‘; “); }
if (ProjectStatus == 3) { NewTextBuilder.Append(” Plot” + i + “Icon.image = ‘” + PinkIcon + @”‘; “); }
if (ProjectStatus == 4) { NewTextBuilder.Append(” Plot” + i + “Icon.image = ‘” + BlueIcon + @”‘; “); }
NewTextBuilder.Append(Environment.NewLine);
NewTextBuilder.Append(” var marker” + i + ” = new GMarker(point” + i + “,markerOptions); “);
NewTextBuilder.Append(Environment.NewLine);
NewTextBuilder.Append(” map.addOverlay(marker” + i + “,” + i + “);”);
NewTextBuilder.Append(Environment.NewLine);
NewTextBuilder.Append(” marker” + i + “.value = ” + i + ” ;”);
NewTextBuilder.Append(Environment.NewLine);
string markerEvent = ” GEvent.addListener(marker” + i + “,\”click\”, function(){ ” + ” map.openInfoWindowHtml(point” + i + “,'” + MarkerText +” – + i + “‘);}); “;
NewTextBuilder.Append(markerEvent);
i += 1;
}
// construct the final script
js.Text = @”<script type=’text/javascript’>
function initialize()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById(‘map_canvas’));
map.setCenter(new GLatLng(28.63,77.2), 4);
” + NewTextBuilder.ToString() + @”
map.setUIToDefault();
}
}
</script> “;
}
}
28.635308
77.224960
Read Full Post »
