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

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:

Hope this helps!

You can download it from here. And, it looks like below now. Good thing is, I fetch the list of the blogs from a WebAPI I’ve hosted in my Windows Azure Website, so I can modify the list whenever needed. I fetch these colors as well from the WebAPI, so I could even change the look and feel of the app without submitting an update to the app in the Windows Store! Do you like it? Let me know if you have more blogs to add. When I find time next, I’ll perhaps update this with sorting the articles by date, so that you could see what’s the latest, instead of a grouping by the blog author. May be, a read/unread status too. Honestly this app is my playground where I’m trying to implement some of my learning. Hopefully I won’t break anything with the updates. If I did, let me know. Your feedback is very important to me.

In this post, I would like to talk about how easy it is to reading an RSS feed, create a List, and bind it to a ListView. For this, I’m going to take an idea of mine which I already turned into an app, and it is available in the Windows Store. This, ‘NASA Image of the Day IOTD’ app of mine pulls the RSS feed from NASA site, and displays it in the app. This also stores the last 6 images you viewed using this in the application’s roamingStorage. I fetch the image, and add it to a WinJS.Binding.List, and bind the same to WinJS.UI.ListView control in the page. Before going into fetching the RSS feed, and creating the List, let’s spend sometime in understanding the ListView control better.

Here is a simple ListView control markup:

<div id="imagesListView" data-win-control="WinJS.UI.ListView"
                data-win-options="{
                    itemTemplate: imagesListTemplate,
                    selectionMode: 'none'
                    }">
</div>

This can’t get any simpler than this, right? data-win-control defines what type of control this simple <div> needs to be turned as, “WinJS.UI.ListView”. You could pass in various options for the ListView via data-win-options. Of course, you can set these properties via javascript code as well. For a ListView, you need to associate an itemTemplate, this is nothing but defines how each individual items need to be displayed. Each item would have different properties, in our example, we might want to fetch the image’s title, source url, date as different properties of an item. So, our template is the definition of how the item is displayed in the app. Here is a simple definition of my itemTemplate:

<div id="imagesListTemplate" data-win-control="WinJS.Binding.Template">
    <div data-win-bind="innerHTML: title"></div>
    <img data-win-bind="src: source" />
    <div data-win-bind="innerHTML: date" ></div>
</div>

Perfect! Now, we have defined how individual items needs to be displayed. Note the data-win-control there “WinJS.Binding.Template”. It’s up to your CSS designing skills that you can make these items shine. Now, we have created a bare minimum ListView, and a item template for the same, now let’s try to bind some items to the List from javascript code.

When you create a simple app using Visual Studio, you would find the bare minimum code already available for your to start with. Take a moment to read the portion of the code inside app.onactivated() method, and the last line where you see WinJS.UI.processAll(), is the one which turns the normal <div> into the control that you have defined. This processes all the data-win attributes, and make your controls ready for further processing. Let’s create an init() function, and call it once the WinJS.UI.processAll() finishes. WinJS has this nice little wonder called, Promises. You could check this link to read more about them. Here is the little code that would call our init function right after finishing the processing of the all UI elements in the page.

args.setPromise(WinJS.UI.processAll().then(init));

Before reading an external RSS feed, let’s try to create a simple List, and bind it with the ListView. Here is how my simple init() function looks like:

function init() {
    var imagesList = new WinJS.Binding.List([
            { title: "Preparing NASA's Next Solar Satellite for Launch", date: "Sun May 25 2013", source: "http://www.nasa.gov/images/content/754945main_2013-2624-full_full.jpg"},
            { title: "The Engine Burns Blue", date: "Fri May 24 2013", source: "http://www.nasa.gov/images/content/751202main_ionengine_full.jpeg"},
            { title: "Pavlof Volcano From Station", date: "Thu May 23 2013", source: "http://www.nasa.gov/images/content/751060main_alaskan_volcano_full_full.jpg"}
    ]);
}

We have now created a simple List, and need to bind this to the ListView. Again, it is very simple. Another 1 line code:

imagesListView.winControl.itemDataSource = imagesList.dataSource;

Now when you execute your app, you would see the ListView populated, and items been shown. Now, you can use your existing CSS skills to make the items look better. There are a few CSS classes you can override for the ListView, such as win-item, classifying each image. It would be better if you use Expression Blend to open your app, and play with these classes.

You have seen how to create a simple List, and bind it to the ListView control in a HTML/WinJS Windows Store app. Let’s now use WinJS.xhr() function to fetch an RSS feed, and read the list of items to populate our list.

WinJS.xhr({ url: "http://www.nasa.gov/rss/image_of_the_day.rss" }).then(function (rss) {

    // query the list of items in the feed
    var items = rss.responseXML.querySelectorAll("item");
    for (var n = 0; n < items.length; n++) {
        var item = {};
        item.date = new Date(items[n].querySelector("pubDate").textContent).toDateString();
        item.description = items[n].querySelector("description").textContent;
        item.source = items[n].querySelector("enclosure").attributes["url"].value;
        item.title = items[n].querySelector("title").textContent;
        item.link = items[n].querySelector("link").textContent;

        imagesList.push(item);
    }
}, function (err) {
    // handle your error here
});

Now, I can successfully display the image that I fetched from the RSS feed. Again, if you notice this particular feed, it just gives only one image always. It doesn’t give the old entries, and I didn’t see any easy way to read the old images. Instead of worrying too much, I thought, I’ll perhaps store this imagesList List to my roamingStorage, and will read from it when the app starts again. Here is a snippet that allows you to store into the roamingStorage, and retrieving the same. I convert the List into a JSON string, and convert it back to an object later.

// Storing to the roamingSettings:

var roamingSettings = applicationData.roamingSettings;
roamingSettings ["myImagesList "] = JSON.stringify(imagesList.slice(0);

// Reading it from roamingSettings:

if (roamingSettings .values["myImagesList"] != null) {
    var json = JSON.parse(roamingSettings .values["myImagesList"]);
    imagesList = new WinJS.Binding.List(json);
}

Hope someone find this useful!