You've successfully subscribed to developer.school
Great! Next, complete checkout for full access to developer.school
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

Getting the Current Geolocation within Fuse Applications

Paul Halliday
Paul Halliday

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! :)

Paul Halliday

👋 Want to see more content? Head over to the YouTube channel: https://youtube.com/c/paulhalliday!