Sharepoint Virtual Earth Webpart

Article
08/08/2008

So you want include functionality similar to live Search map in a webpart. The process is very simple since webpart can easily act as a container for any control and at the end of day VE Map Search page also contains bunch of VE and other controls.

So here is what will try to achieve:

We will try to create a webpart which will allow user to enter search location (what and where) and then the webpart will show a virtual earth map corresponding to the entered location.

So, how would you simply show a Virtual earth map in an HTML page?

May be with a HTML Script like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

var map = null;

function GetMap()

{

map = new VEMap('myMap');

map.LoadMap();

}

</script>

</head>

</body>

</html>

If you observe here, all we have done is to register map control script using

And then you created simple script to instantiate the VE map Control placing VE map in a div container. This shows up a Virtual earth map in an HTML Page.

Just replicate the same code in a webpart; all you need to do is to embed the script in the webpart.

Here is a sample…

// Script to register Virtual Earth Controls

private const string includeVEScriptKey1 = "includeVEScriptKey1 ";

private const string embeddedScriptFormat = @"<script type=""text/javascript"" src="" mce_src=""https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6""></script>";

//Embedded Custom Script to include VE Wrapper and other controls

private const string includeVEScriptKey2 = "includeVEScriptKey2";

private string m_embedScriptToLoadMap;

protected void RegisterCommonScript()

{

m_embedScriptToLoadMap = @" var map = null;

function GetMap()

{

map= new VEMap('myMap');

map.LoadMap(new VELatLong(47.6, -122.33), 10 ,'h' ,false);

map.SetMapStyle(VEMapStyle.Road);

}

function Find()

{

try

{

map.Find(document.getElementById('"+ m_txtWhat.ClientID + "').value, document.getElementById('"+m_txtWhere.ClientID+ @"').value);

}

catch(e)

{

alert(e.message);

}

return false;

}

document.body.onload=GetMap; ";

// Make sure that the scripts were not already added to the page.

if (!Page.ClientScript.IsClientScriptBlockRegistered(includeVEScriptKey1))

{

this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), includeVEScriptKey1, embeddedScriptFormat);

}

if (!Page.ClientScript.IsClientScriptBlockRegistered(includeVEScriptKey1))

{

this.Page.ClientScript.RegisterStartupScript(this.GetType(), includeVEScriptKey1, m_embedScriptToLoadMap, true);

}

protected override void RenderContents(HtmlTextWriter writer)

{

base.RenderContents(writer);

//Placeholder for the VE Map

writer.Write("<div id='myMap' style=\"position:relative; width:" + VirtualEarthMapWidth + "; height:" + VirtualEarthMapHeight + ";\"></div>");

}

You can further enhance this script to emulate the behavior of Live Maps where you enter the address to be search and the result is shown in the virtual earth map.

What you need to do is to add a textbox in which user can enter location to search and a submit button click of which calls this script and reloads the webpart.

Here is the sample code

//Global Variables

private TextBox m_txtWhat;

private TextBox m_txtWhere;

private HtmlButton m_btnFind;

protected override void OnInit(EventArgs e)

{

this.Load += new EventHandler(OnWebPartLoad);

base.OnInit(e);

}

private void OnWebPartLoad(object sender, EventArgs e)

{

// build up the table that is our UI

Table outerTable = new Table();

TableRow row1 = new TableRow();

TableCell cell1 = new TableCell();

TableCell cell2 = new TableCell();

TableCell cell3 = new TableCell();

TableCell cell4 = new TableCell();

TableCell cell5 = new TableCell();

TableCell cell6 = new TableCell();

TableCell cell7 = new TableCell();

cell1.Text = “What”;

m_txtWhat = new TextBox();

m_txtWhat.ID = "txtWhat";

cell2.Controls.Add(m_txtWhat);

cell3.Text = " ";

cell4.Text = “Where”;

m_txtWhere = new TextBox();

m_txtWhere.ID = "txtWhere";

m_txtWhere.Text = “Redmond”;

cell5.Controls.Add(m_txtWhere);

cell6.Text = " ";

m_btnFind = new HtmlButton();

m_btnFind.ID = "find";

m_btnFind.InnerText = “FInd”;

m_btnFind.Attributes.Add("onclick", "Find();");

cell7.Controls.Add(m_btnFind);

row1.Cells.AddRange(new TableCell[] { cell1, cell2, cell3, cell4, cell5, cell6, cell7 });

outerTable.Rows.Add(row1);

this.Controls.Add(outerTable);

}

That was simple, right!!

There can be number of changes and enhancements that you can do with this one. Instead of embedding the client script, you can provision the script to the server which makes the script itself extensible and adds to separation to code and script. I just gave example with embedded script, just for the sake of simplicity.

You can extend the functionality to auto complete the address textboxes using AJAX.

Sharepoint Virtual Earth Webpart

Additional resources