Geolocation: Windows Store Apps JS/HTML and C#/XAML side by side

I’ve gotten quite a few requests in regards to blog posts showcasing JS/HTML and C#/XAML side by side. Seems appropriate as I’m just about to start the step by step guide for JS and HTML Windows Store Apps. I have to admit, JS is not my strongest language, so feel free to correct me if I make any mistakes :) This series will be simple, straight to the point, no fuss. Be aware that this example has no error handling, and shows only a very basic implementation as a step one.
First of all don’t forget to declare that the app will use location, otherwise you will be met by this fine notification:

Don’t forget to declare that app uses location

In the app manifest tick this box in capabilities

Comparing of the views

Comparing html and xaml in windows store apps

Comparing JS and C#

Comparing javascript and C# in windows store apps

C# and XAML

[sourcecode language=“XML”]

[/sourcecode]

[sourcecode language=“csharp”]
using System;
using System.Collections.Generic;
using System.IO;
using System.Threading.Tasks;
using Windows.Devices.Geolocation;
using Windows.UI.Xaml.Controls;

namespace GeolocationWinRT
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}

    private async void Button\_Click\_1(object sender, Windows.UI.Xaml.RoutedEventArgs e)  
    {  
        var position = await new Geolocator().GetGeopositionAsync();  
        var coordinates = position.Coordinate;  

        notify.Text =  string.Format("Lat: {0} | Long {1} | Accuracy {2}",   
                        coordinates.Latitude,  
                        coordinates.Longitude,  
                        coordinates.Accuracy,  
                        coordinates.Altitude);  
    }  

}

}

[/sourcecode]

Javascript and HTML

[sourcecode language=“HTML”]

[sourcecode language=“javascript”]
(function () {
“use strict”;

WinJS.Binding.optimizeBindingReferences = true;  

var app = WinJS.Application;  
app.onactivated = function () {  
        document.getElementById("getLocation").addEventListener("click", buttonClickHandler, false);  
};  
app.start();  

function buttonClickHandler() {  
        var loc = new Windows.Devices.Geolocation.Geolocator();  
        loc.getGeopositionAsync().then(function (pos) {  
            document.getElementById('notify').innerHTML =  
                "Lat: " + pos.coordinate.latitude +  
                " | Long " + pos.coordinate.longitude +  
                " | Accuracy " + pos.coordinate.accuracy;  
        });  
    }

})();
[/sourcecode]

MSDN how to implement Geolocation in JS
MSDN how to implement Geolocation in C#

Geolocation: Windows Store Apps JS/HTML and C#/XAML side by side

Comments