the next door (so called) geek @rakkimk | your next door geek | friend | blogs mostly on technology, and gadgets.

Windows Store XAML app sample that uses Bing Maps SDK, and shows the current time of the selected city

I was trying to help one of my colleague who was trying to build a different app, where I found using Bing Maps would be appropriate. While helping him, I ended up building this full working app that shows you the current time of the city that you selected from the map. Here is what you would need do to find a time of a different city:

  • Open the app.
  • Zoom into the city, and just long touch, or right click using mouse.
  • See the time of the city displayed right in the app.

Sounds good? Let’s build the sample. First of all, you need to download the Bing Maps SDK, create an account, and get a Bing Maps Key. Here are a few links that would be helping you.

   Getting Started
   http://msdn.microsoft.com/en-us/library/hh846498.aspx

   Getting a Bing Maps Key
   http://msdn.microsoft.com/en-us/library/ff428642.aspx

   Create a Windows Store app (for Windows 8)
   http://msdn.microsoft.com/en-us/library/hh846489.aspx

Once you have followed the steps in the second link, you would now have the Bing Maps Key that you would be using in the app. Now, you can follow the steps mentioned in the third link above, to have something like below in your XAML, of course having your Bing Maps key that you obtained earlier.

<bm:Map Credentials="YOUR_BING_MAPS_KEY" x:Name="myMap"></bm:Map>

So, going with the functionality of the app, you need to write some code that needs to be executed when the user (long) touches, or just do a right click on the map. Let us write some code for the RightTapped event. Here is what we need to do:

  • Fetch the latitude and longitude of the place that we just selected in the map.
  • Find the timezone for the latitude, and longitude selected.

We could use Map.TryPixelToLocation() that accepts the Point that we we just selected in the Map, and an out parameter that will have the Location co-ordinates. If this method returns true, we could then go and add a pushpin to show the user the place he/she just selected in the map, and then go and fetch the timezone information for the latitude, and longitude selected. I found a free, and easy to use service from EarthTools to get this information that we need. Look at this page for more on their APIs. Again, there are other commercially available services available for this, so please try to explore other options as well. You need to pass the latitude, and longitude of the place, and the service returns you the time of the selected place, also it’s timezone offset, day light savings information. I just parse the time from the output, some lazy code there, doing some string parsing. The output is an XML document, so you could use your own XML parsing to fetch the details, but for the sample purpose, I just stuck to the infamous string parsing.

Here is how my code looks like now for the RightTapped event handler:

private async void myMap_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
// when I right click, or long touch, this event gets triggered. 
// I then try to fetch the selected location's geo co-ordinates
// and draw a pushpin there
    Location location = new Location();
bool succeeded = myMap.TryPixelToLocation(e.GetPosition(myMap), out location);
 
if (succeeded)
    {
// add pushpin
        Pushpin pin = new Pushpin();
        myMap.Children.Add(pin);
        MapLayer.SetPosition(pin, location);
 
        textBlock1.Text = "contacting the server for geo information";
// get the timezone information
        WebRequest webReq = WebRequest.Create("http://www.earthtools.org/timezone-1.1/" + location.Latitude.ToString() + "/" + location.Longitude.ToString());
        WebResponse resp = await webReq.GetResponseAsync();
 
        Stream dataStream = resp.GetResponseStream();
        StreamReader reader = new StreamReader(dataStream);
// Read the content from the server. 
string responseFromServer = reader.ReadToEnd();
 
// example code to just manipulate the string from the xml output. you could do XML parsing if needed.
int startPos = responseFromServer.IndexOf("<localtime>") + 11;
int length = responseFromServer.IndexOf("</localtime>") - startPos;
string time = " Time : " + responseFromServer.Substring(startPos, length);
 
        textBlock1.Text = time;
    } 
}

You could download the sample from here.

This is how my sample looks:

clip_image001

Hope this helps!