Getting the Current Geolocation within Fuse Applications

30 Jul 2017

In this article, we're going to look at retrieving the geolocation of the user within our Fusetools application(s). If you haven't used Fuse before, download the tools here.

Geolocation Package

Using geolocation inside of our application is fairly simple. Firstly, we need to include the Fuse.GeoLocation package inside of our project's .unoproj file.

{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS",
    "Fuse.GeoLocation"
  ],
  "Includes": [
    "*"
  ]
}

Now we're able to call the Geolocation API from within our application.

Current Geolocation

When we're integrating third party tools inside of our application, we'll need to have permission from the user, this is automatically prompted when using geolocation.

We can start off by importing FuseJS/Geolocation, which allows us to access the current device Geolocation. I've chosen to export a variable named currentLocation and we're able to access the current location with GeoLocation.location.

<App>
    <JavaScript>
        // Importing Geolocation
        var GeoLocation = require("FuseJS/GeoLocation");

        // Current Location
        module.exports.currentLocation = JSON.stringify(GeoLocation.location);
    </JavaScript>
 
    <StackPanel>
        <TextView TextWrapping="Wrap" Value="{currentLocation}"></TextView>
    </StackPanel>
</App>

The resulting object looks similar to this:

{
  altitude: altitude measured in meters,
  latitude: a number measured in decimal degrees,
  longitude: a number measured in decimal degrees,
  accuracy: a number measured in meters,
  speed: speed measured in meters per second
}

More information can be found on the Fuse documentation.

Get Geolocation

Another way in which we can access the location of a user is by using the GeoLocation.getLocation() method. I've attached this to an observable that we can display inside of our view.

<App>
    <JavaScript>
        // Imports
        var Observable = require("FuseJS/Observable");
        var GeoLocation = require("FuseJS/GeoLocation");

        // Variable
        var getLocationTimeout = Observable("");
        
        // Timeout if not able to get location after 1000 ms
        GeoLocation.getLocation(1000).then(function(location){
            getLocationTimeout.value = JSON.stringify(location);
        }).catch(function(failure){
            console.log("Geolocation failure:" + failure);
        }) 

        module.exports = {
            getLocationTimeout: getLocationTimeout
        }
    </JavaScript>
 
    <StackPanel>
        <TextView TextWrapping="Wrap" Value="{getLocationTimeout}"></TextView>
    </StackPanel>
</App>

The getLocation() method takes an optional numerical parameter that allows us to timeout after attempting to capture location for a specified amount of milliseconds.

In other news, if you haven't got the Visual Studio Code extension for Fuse, download it now! :)