Passing values between the Silverlight Bing Map Control and aspx pages

… or how to easily embed Bing Maps into your existing ASP.NET application. So lets assume you have your fully working ASP.NET app which contains Datagrids dataforms, etc and you now want to add that little extra spatial glitz by embedding Bing Maps. Assume also that your data contains street addresses or Latitude/Longitude pairs. The most common thing that you would want to do is to be able to zoom to the map to a point which -say- represents the location of the selected record in a datagrid and/or click along a pushpin on the map which represents a record in your database and display its attributes in the aspx page.
The technique I propose here is -hopefully- simple and easy to implement. Note that this is just a generic approach. Depending on your data and business logic you should be able to change it accordingly. 
It can be broadly described using the following steps:
To Zoom to the Map by clicking a button on the ASPX page:
  1. When clicking the button a hidden field in the aspx page is populated with the Lat/Lon values of the currently selected Gridview/DataForm record  
  2. The Update panel that contains the Silverlight control gets updated.
  3. This will cause the Silverlight control to get refreshed and pass through the Page_Load event
  4. The Page_Loaded event reads the value of the hidden field in the aspx page, converts them into a Bing Maps Location object and zooms the map to that location.
To display the attributes of a location by clicking on the map
  1. User clicks on the map
  2. The MouseLeftButton down event is fired (either on the map or a layer) which populates the hidden Textbox in the aspx page.
  3. The Textbox is populated with either the ID of the record or the Lat/Lon values of the click point.
  4.  The OnTextChanged() event on the textbox is fired which calls the relevant business logic function to display the attributes.
To implement the above: 
In your page make sure you enclose the Bing Maps control in an update panel as below (Note: The following code uses the Silverlight 2 control. Hasn’t been tested yet with Silverlight 3 proposed object tag but it should work.
 <asp:UpdatePanel ID=”upnlSL” runat=”server” UpdateMode=”Conditional”> 
  <div id=”BingMapInterface” style=”display:none; width:0px; position:absolute;top:-800px; “>
  <asp:TextBox ID=”txtBingMapRequests” runat=”server” Width=”100″ onblur=”javascript:Changed(this);” OnTextChanged=”txtBingMapRequests_OnTextChanged” AutoPostBack=”true”></asp:TextBox>
 Notice that the whole update panel has been enclosed in a <div> tag with the display attribute set to none so it won’t show on the page. Also note that the txtBingMapRequests, the textbox that will receive the Lat/Lon coordinates has an onblur() event as well as a OnTextChanged event. This will ensure that a postback on the page will occur as soon as the textbox value is changed.
The onblur() javascript event is:
<script type=”text/javascript”> 

function Changed(textControl) {“upnlSL”, null);}  

The OnTextChanged event is implemented as: 
 protected void txtBingMapRequests_OnTextChanged(object sender, EventArgs e){ 
 string  s = txtBingMapRequests.Text; 
 By causing the BingMaps update panel to update the Page_Loaded function in our Silverlight project will fire which can be similar to:
void  Page_Loaded(object sender, RoutedEventArgs e)
//Get the value of the txtBingMapRequest textbox
HtmlElement txtRequest = HtmlPage.Document.GetElementById(“txtBingMapRequests”); 
if (txtRequest.GetProperty(“value”).ToString() != string.Empty)
{string[] coords = txtRequest.GetProperty(“value”).ToString().Split(‘;’); 
if (coords.Length == 2) {
string lon = coords[0];
string lat = coords[1]; 
Location poiLoc = new Location(Convert.ToDouble(lon), Convert.ToDouble(lat));map.SetView(poiLoc, 18);
catch (Exception){}
Note that we assume that the value of the textbox is a string which holds the Lat/Lon coords separated by a ‘;’
We can implement the reverse in a similar way so when you click on the map the aspx page gets updated with the selected location/record.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s