This article is more than 1 year old

Virtual Earth puts human face on data

Lightweight programming, minus Google

Project Watch: Microsoft 2008 Those who have been following Project Watch will know that I have been leading the development in a large database project using SQL Server 2008, Windows 2008 and Visual Studio 2008.

Relatively heavy stuff. Part of that project, though, involves the creation of a mashup that displays our spatial data on a map - yes, I know, all very Web 2.0, but something that improves the experience for the user. People look at a web page and enter some value (a time period, or a location and a radius), click a button and lo, the relevant spatial data is displayed with points on a map.

In practice the web page talks to a web service, which talks to the database. That returns a data set to the service, which punts it up to the web page and the data is displayed on a map retrieved from Virtual Earth. Easy.

Why did we pick Microsoft's Virtual Earth rather than rival Google's offerings, which have been getting most play when people talk of map-related mashups?

Well, let's reverse the questions. Why Google? Why not Virtual Earth? Both are excellent mapping services. You might imagine that Virtual Earth would integrate better with Visual Studio but it's Just Another Programming Interface, or JAPI, as far as the code is concerned.

So, we could have chosen either but, since everyone is talking about Google, just to buck the trend, we decided to try out the underdog for our initial testing. It seems to be working fine, so we'll probably stick with it.

How did we get to this point? Starting with the web page, it needs some sort of interactive component that allows the user to enter input. In this case we've used a text box and a button. The text box lets the user enter the year for which data should be displayed and when the button is clicked, the contents of the text box are whizzed off to the web service.

The code below describes the user interface bits:

   <tr>
        <td colspan=2 align=center>
            <b>Locations in Year</b>
        </td>
    </tr>
    <tr>
        <td>Year:</td>
        <td><input type="text" id="yearTextBox" size="10"
                   maxlength="4" value="2008" /></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><button onclick="getbyyear()"
          title="Find locations for the specified year.">Find</td>
    </tr>

Once the button is clicked, it calls a function called getbyyear:

    function getbyyear()
    {
        // fetch value from webpage
        var year = document.getElementById('yearTextBox').value;
   
        // use standard web service call
        microsoft.samples.com.ILocationDataService.GetLocationsForYear(
            year, onSuccess, onFailure); // Pass to web service
        
        document.getElementById('SearchingText').innerHTML =
          '<b>Searching...</b>';  // feedback to screen

Once the button is clicked, it calls a function called "getbyyear":

microsoft.samples.com.ILocationDataService.GetLocationsForYear(
    year, onSuccess, onFailure);

The function declares a variable called "year" and goes to the web page where it fetches the value in the text box called "yearTextBox" (say, 2004). A call to the web service is initiated by the following line:

microsoft.samples.com.ILocationDataService.GetLocationsForYear(
    year, onSuccess, onFailure);

This calls "GetLocationsForYear" in the web service and passes to it the value from the text box (2004). The web service sends the value to a stored procedure that in turn launches a query to fetch the data from the database.

More about

TIP US OFF

Send us news


Other stories you might like