Windows 8 Metro Application–Bing Maps


I’ve entered myself into a new Windows 8 application contest.  I’ve come up with a wonderful idea which includes utilizing Bing Maps.  After an awful lot of research I’ve come up with something that works… Perfectly!!!

Since this is a Windows 8 application, I’m writing this in Visual Studio 11 express which utilizes an awesome multi-threading feature called async/await.  So I’ll be taking advantage of that here.

First thing I needed to do was acquire my Bing Map Developers key… Acquire yours free from:  https://www.bingmapsportal.com

Let’s start coding!!!

I followed the following MSDN article to setup my app for access to the Bing SOAP API’s.  http://msdn.microsoft.com/en-us/library/cc966738.aspx

Then added the following to the top of my code:

using HouseofRepresentatives.GeocodeService;
using HouseofRepresentatives.SearchService;
using HouseofRepresentatives.ImageryService;
using HouseofRepresentatives.RouteService;


private ImageSource _map = null;
public String Latitude = "";
public String Longitude = "";


public ImageSource Map
{
    get
    {
        if (this._map == null) UpdateMap();
        return this._map;
    }

    set
    {
        if (this._map != value)
        {
            this._map = value;
            this.OnPropertyChanged("Map");
        }
    }
}

I had two situations for my locations… in one case I knew the exact Lat/Lon, and in others I only knew an address… in my case a state name.  First I needed to turn that address into a Lat/Lon for passing onto the get map function.

private async Task<string> getLocationPoint(string address)
{
    if (address != null && address != "")
    {
        GeocodeRequest request = new GeocodeRequest();
        request.ExecutionOptions = new HouseofRepresentatives.GeocodeService.ExecutionOptions();
        request.ExecutionOptions.SuppressFaults = true;
        GeocodeServiceClient geocodeClient = 
            new GeocodeServiceClient(GeocodeServiceClient.EndpointConfiguration.BasicHttpBinding_IGeocodeService);
        HouseofRepresentatives.GeocodeService.Credentials t = 
            new HouseofRepresentatives.GeocodeService.Credentials();
        t.Token = "[[put your Bing Maps Key Here]]";

        request.Query = address;
        request.Credentials = t;

        GeocodeResponse response = await geocodeClient.GeocodeAsync(request);
        if (response.Results.Count() > 0)
        {
            return response.Results[0].Locations[0].Latitude.ToString() + 
                "," + response.Results[0].Locations[0].Longitude.ToString();
        }
    }
    return "";
}

Next I needed to actually get the Image from Bing.  Now let’s do that using the following function:

private async Task<string> GetImagery(string locationString)
{  //http://msdn.microsoft.com/en-us/library/dd221354.aspx
    string key = "[[insert your Bing Maps Key here]]";
    MapUriRequest mapUriRequest = new MapUriRequest();

    // Set credentials using a valid Bing Maps key
    mapUriRequest.Credentials = 
        new HouseofRepresentatives.ImageryService.Credentials();
    mapUriRequest.Credentials.ApplicationId = key;
                      

    // Set the location of the requested image
    mapUriRequest.Center = new HouseofRepresentatives.ImageryService.Location();
    string[] digits = locationString.Split(',');
            
    mapUriRequest.Center.Latitude = double.Parse(digits[0].Trim());
    mapUriRequest.Center.Longitude = double.Parse(digits[1].Trim());

    // Set the map style and zoom level
    MapUriOptions mapUriOptions = new MapUriOptions();
    mapUriOptions.Style = MapStyle.AerialWithLabels;
    mapUriOptions.ZoomLevel = 17;

    // Set the size of the requested image in pixels
    mapUriOptions.ImageSize = new HouseofRepresentatives.ImageryService.SizeOfint();
    mapUriOptions.ImageSize.Height = 240;
    mapUriOptions.ImageSize.Width = 480;

    mapUriRequest.Options = mapUriOptions;

    //Make the request and return the URI
    ImageryServiceClient imageryService = 
        new ImageryServiceClient(ImageryServiceClient.EndpointConfiguration.BasicHttpBinding_IImageryService);
            
    try
    {
        MapUriResponse mapUriResponse = await imageryService.GetMapUriAsync(mapUriRequest);

        if (mapUriResponse.Uri != null)
        {
            return mapUriResponse.Uri;
        }
        else { return ""; }
    }
    catch (Exception ex)
    {
        return "";
    }
}

Ok… now that I have my image Uri, it’s time to use it to load a picture:

public async Task<bool> UpdateMap(string address = "")
{
    if (address != "")
    {
        //then user is specifying an address instead of a specific long/lat.  
        //We need to get that info in order to proceed...
        string point = await getLocationPoint(address);
        if (point != "")
        {
            string[] p = point.Split(',');
            Latitude = p[0];
            Longitude = p[1];
        }
    }

    if (Longitude != "" && Latitude != "")
    {
        string uripath = await GetImagery(Longitude + "," + Latitude);
        if (uripath != "")
        {
            this.Map = new BitmapImage(new Uri(uripath));
            return true;
        }
        else
        {
            this.Map = new BitmapImage(new Uri(imageBaseUri, "Data/blank.png"));
            return false;
        }
    }
    else
    {
        this.Map = new BitmapImage(new Uri(imageBaseUri, "Data/blank.png"));
        return false;
    }
}

If you’ve stuck with me this far… you are a programmer… LOL.

In each of my functions I utilized the new async/await features.  This means when I call either of the two functions as below, it will load the image once the OS has downloaded and cached it.  The image will automatically appear when ready…

//calling the get-map function with an address
UpdateMap("Arkansas");

//or
UpdateMap("1 Microsoft Way, Redmond, Washington");

//or i can configure my lat/lon then update
Latitude = "39.450000762939453";
Longitude = "-98.907997131347656";
UpdateMap();

If you guys have any questions or comments, be sure to post them below!

Advertisements

One thought on “Windows 8 Metro Application–Bing Maps

  1. I tried to perform the steps as mentioned by you, but after I add the different services GeocodeService, ImageryService, etc. using svcutil.exe I get the following error:

    Error 1 The type or namespace name ‘IExtensibleDataObject’ does not exist in the namespace ‘System.Runtime.Serialization’ (are you missing an assembly reference?) C:\Users\gandhisa\Documents\Visual Studio 11\Projects\IntegratedMapsApp\IntegratedMapsApp\VirtualEarthWebServices.cs 4000 81 IntegratedMapsApp

    I get his error for about a 138 times with ‘IExtensibleDataObject’ and ‘ExtensibleDataObject’ found missing.

    Plesae suggest some stuff that I might have missed in doing this.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s