Accessing GPS / location data using Cloudpebble and PebbleJs

Question

Trying to show my current GPS location on my pebble by writing a simple script (see code below).

It all works just fine, but I cannot access the GPS-values.

The code is built on pebbles own geolocation example.

My problem is that I can only get the GPS data within the function locationSuccess() .

How do I access the GPS data (i.e. the values of myLat and myLong) outside that function? I want to put the GPS data into this line:

text : 'GPS:\n',

I am using CloudPebble and Pebble.js

The code:

var UI = require('ui');
var Vector2 = require('vector2');

var locationOptions = {
  enableHighAccuracy: true, 
  maximumAge: 10000, 
  timeout: 10000
};


// Get the location
function locationSuccess(pos) {
    console.log('\n****** START ******\nhere I am:\nlat= ' + pos.coords.latitude + ' lon= ' + pos.coords.longitude + '\n'); // Just to se that it works fine
    var myLat = pos.coords.latitude;
    var myLong = pos.coords.longitude;
    console.log('My location\n' + myLat + ' and ' + myLong + '\n****** THE END  02 ******\n'); // This does also work fine
}   
function locationError(err) {
  console.log('location error (' + err.code + '): ' + err.message);
}

// Make an asynchronous request
navigator.geolocation.getCurrentPosition(locationSuccess, locationError, locationOptions);


// Create a text object 
var infotext = new UI.Text(
{
  position: new Vector2(0, 0),
  size: new Vector2(144, 168),
    text : 'GPS:\n',
  font: 'Gothic 28',
  color: 'white',
  textAlign: 'center'   
});

// Create and show the location (vars x and y are empty - why?)
var infowindow = new UI.Window();
infowindow.add(infotext);
infowindow.show(); 

Answer 1

Since I can't add a comment to your post I will edit my first answer. Sorry for the mistakes in my first answer, I was not too familiar with the geolocation function.

You are not receiving any response at the end 02 because the function locationSuccess() has not ran yet, so no values have been assigned to myLat and myLong.

The reason that you are not receiving a response at the end 03 is because the function navigator.geolocation.getCurrentPosition() works asynchronously. It hasn't finished running when your next console.log executes so the values of your variables still haven't been set.

What I would suggest is to wrap your code that uses the geolocation into your locationSuccess function, since this success function is the intended area for that type of code anyhow.

Changes I Made:

By moving your success code into the success function, you no longer have to initialize the latitude and longitude variables, so I removed those from the code below. I also modified your original GPS window text infotext to display: "Loading GPS Data...". That way infowindow loads immediately, and shows a loading screen while navigator.geolocation.getCurrentPosition runs in the background.

Once the current position is found it will run the success function. I added a line to the end of this function to update the text in the GPS window to display the latitude and longitude. I also added a similar line to the error function to let the user know if something went wrong. You shouldn't need to call infowindow.add(infotext); or infowindow.show(); again for the text to update on the screen. I also moved navigator.geolocation.getCurrentPosition below the creation of the info window/text, so that the success/error functions cannot try to update the text before the text UI was created.

Updated Code:

var UI = require('ui');
var Vector2 = require('vector2');

var locationOptions = {
  enableHighAccuracy: true, 
  maximumAge: 10000, 
  timeout: 10000
};

// Get the location
function locationSuccess(pos) {
    console.log('\n****** START ******\nhere I am:\nlat= ' +     pos.coords.latitude + ' lon= ' + pos.coords.longitude + '\n'); // Just to se     that it works fine
    var myLat = pos.coords.latitude;
    var myLong = pos.coords.longitude;
    console.log('My location\n' + myLat + ' and ' + myLong + '\n****** THE END  01 ******\n'); // This does work fine
    //modify the text within infotext to show GPS data
    infotext.text('GPS:\n' + myLat + '\n' + myLong);
}   
function locationError(err) {
  console.log('location error (' + err.code + '): ' + err.message);
    //modify the text within infotext to alert user of error
    infotext.text('Error Loading GPS Data!');
}

console.log('My location\n' + myLat + ' and ' + myLong + '\n****** THE END      02 ******\n'); 

// Create a text object 
var infotext = new UI.Text(
{
  position: new Vector2(0, 0),
  size: new Vector2(144, 168),
  text : 'Retrieving GPS Data...',  
  font: 'Gothic 28',
  color: 'white',
  textAlign: 'center'   
});

// Create and show the location (vars x and y are empty - why?)
var infowindow = new UI.Window();
infowindow.add(infotext);
infowindow.show();

// Make an asynchronous request
navigator.geolocation.getCurrentPosition(locationSuccess, locationError,locationOptions);

console.log('My location\n' + myLat + ' and ' + myLong + '\n****** THE END  03 ******\n'); 

/edit

Original Answer:

The variables myLat and myLong are local variables in the function locationSuccess. To fix this issue you must change the scope in which myLat and myLong are defined.

In the below example, I defined the variables globally so that all scripts and functions can reference them.

var UI = require('ui');
var Vector2 = require('vector2');

//define variables globally
var myLat;
var myLong;

var locationOptions = {
  enableHighAccuracy: true, 
  maximumAge: 10000, 
  timeout: 10000
};


// Get the location
function locationSuccess(pos) {
    console.log('\n****** START ******\nhere I am:\nlat= ' + pos.coords.latitude + ' lon= ' + pos.coords.longitude + '\n'); // Just to se that it works fine
    //assign value to globally scoped variables
    myLat = pos.coords.latitude;
    myLong = pos.coords.longitude;
    console.log('My location\n' + myLat + ' and ' + myLong + '\n****** THE END  02 ******\n'); // This does also work fine
}   
function locationError(err) {
  console.log('location error (' + err.code + '): ' + err.message);
}

// Make an asynchronous request
navigator.geolocation.getCurrentPosition(locationSuccess, locationError, locationOptions);


// Create a text object 
var infotext = new UI.Text(
{
  position: new Vector2(0, 0),
  size: new Vector2(144, 168),
    text : 'GPS:\n',
  font: 'Gothic 28',
  color: 'white',
  textAlign: 'center'   
});

// Create and show the location (vars x and y are empty - why?)
var infowindow = new UI.Window();
infowindow.add(infotext);
infowindow.show(); 

For further information on variable scope, this is a good reference.