Introduction
This article describes how to collect information from users based on Virtual Earth. On the map, a push pin is displayed, and when the user hovers the mouse over the push pin, an Info-Box is displayed, which contains a controller that's needed to collect user information. The user can enter information related to that location and press the Save button to save the information and move on. In this article, I am using Virtual Earth API, JavaScript, AJAX controls, and HTML to show how to do this.
Using the code
Load a basic map
First, I will describe how to load a Virtual Earth map to an AJAX enabled ASP page (.aspx). Before we go further, let's load a basic map to our web page. These are the things we should do in order to load a Virtual Earth map on an AJAX enabled ASP page:
HTML
Within the body tag of the page, we should call the JavaScript function LoadMap():
<body onload="LoadMap()">
Within the form tag, the ScriptManager AJAX controller should be implemented:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference
Path="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" />
</Scripts>
</asp:ScriptManager>
....
....
</form>
And finally, on the HTML document, a div tag should be included, which will be used to display the map. The size of the map displayed is specified in the style tag.
<div style="position:relative;width:808px;
height:680px;left:10px;top:10px;" id="mapDiv"></div>
Code-behind
In the code-behind page_load() event, I register the script required to run the LoadMap() function called from the HTML code. I can include this JavaScript in the HTML page, but I am using this in the code-behind because that will make further work on it easy to do. Here, I have used a StringBuilder class to add the JavaScript, and ClientScript.RegisterStartupScript to register the script as a start-up script.
protected void Page_Load(object sender, EventArgs e)
{
System.Text.StringBuilder mapScript =
new System.Text.StringBuilder();
mapScript.Append("function LoadMap()");
mapScript.Append("{");
mapScript.Append("myMap = new VEMap('mapDiv');");
mapScript.Append("myMap.LoadMap();");
mapScript.Append("myMap.SetZoomLevel(12);");
mapScript.Append("myMap.SetCenter(new " +
"VELatLong(-38.374238,145.221842));");
mapScript.Append("}");
Type t = this.GetType();
if (!ClientScript.IsStartupScriptRegistered(t, "MapScript"))
ClientScript.RegisterStartupScript(t, "MapScript",
mapScript.ToString(),
true);
}
Now, the page should display a map like this:
Adding pushpins
After successfully displaying a map on the ASP page, we are now going to add a pushpin to the map. Here, I am adding only one push pin, but later on, you can add more pushpins as you like.
mapScript.Append("var shapes = new Array();");
mapScript.Append("var vePoint1 = " +
"new VELatLong(-38.374238,145.201842);");
mapScript.Append("var shape1 = " +
"new VEShape(VEShapeType.Pushpin,vePoint1);");
mapScript.Append("shape1.SetTitle('Point1');");
mapScript.Append("shapes.push(shape1); ");
mapScript.Append("var shapeLayer = new VEShapeLayer();");
mapScript.Append("myMap.AddShapeLayer(shapeLayer);");
mapScript.Append("shapeLayer.AddShape(shapes);");
Setting up the form
After adding a pushpin to the map, the next step is to add controllers to the push pins description section. Here, I am using the shapes description section to add the controls.
mapScript.Append("shape1.SetDescription(\"" + getInfoBox() + "\");");
getInfoBox() is a C# function which generates the HTML code for the controls that we wish to include. I have included a dropdown menu, a text box, and a Save button.
private string getInfoBox()
{
string strInfoBox = "";
strInfoBox = "<FORM NAME='myform'><p>Description :
<input type=text id='descbox' value='' />";
strInfoBox += "</br>Type :<br/> <select style='width:155px;' name='type'>";
strInfoBox += "<option selected='yes' value='B'>Bus Station</option>";
strInfoBox += "<option value='C'>Cinema</option>";
strInfoBox += "<option value='S'>Shopping Mall</option>";
strInfoBox += "</select><br/>";
strInfoBox += "</br><input type='button' value='Save' id='btnSend'
onclick='SaveValues(this.form)' />";
strInfoBox += "</br><input type='hidden' id='pointID' value='1'/>";
strInfoBox += "</p></FORM>";
return strInfoBox;
}
Finally, when the user hovers the mouse over the pushpin, the result would be:
Saving information
In the shapes description section, I have included a button named Save to save the user selection. In the onclick event of the Save button, I call the SaveValues() JavaScript function. This is in the head section of the page's HTML code.
<script type="text/javascript">
function SaveValues(form)
{
_pointID = parseFloat(form.pointID.value);
_description = form.descbox.value;
_type = form.type.value;
var tboxPointID = document.getElementById('txtPointID');
if (tboxPointID)
{
tboxPointID.value = _pointID;
}
var tboxDesc = document.getElementById('txtDesc');
if (tboxDesc)
{
tboxDesc.value = _description;
}
var tboxType = document.getElementById('txtType');
if (tboxType)
{
tboxType.value = _type;
}
var btn = document.getElementById('btnSave');
btn.click();
}
</script>
In the SaveValues function, I save the user selection into JavaScript variables, and then set those values into hidden textboxes. You should include the text boxes below into the HTML document, under the body section:
<input id="txtPointID" runat="server" type="hidden" />
<input id="txtDesc" runat="server" type="hidden" />
<input id="txtType" runat="server" type="hidden" />
Then, I raise the Click event of the btnSave button in the ASPX page. btnSave button is a server-side button, and its height and width are set to zero in order to make it invisible.
<asp:Button ID="btnSave" runat="server"
Style="z-index: 100; position: relative; height: 0px; width: 0px;"
CausesValidation="False"
OnClick="btnSavePoint_Click" />
At the button's onClick() event, we access the data and save it to a database or any other media. I am not going to describe how to so that here, as it is out of the scope of this article.
protected void btnSavePoint_Click(object sender, EventArgs e)
{
string PointID = txtPointID.Value;
string Type = txtType.Value;
string Description = txtDesc.Value;
}
Done.
Points of interest
The width and height of the btnSave button is set to zero in order to make it invisible; in IE, this won't work as expected, but Firefox gives a good result.
