Forum Academy Marketplace Showcase Pricing Features

Custom Geolocation Code

So a few problems I encountered with location access for my taxi app.

  • The Geo Location is not updated in real time.
  • if the user blocks the location permission
  • permission timeouts
  • if location is turned off or has an error

This Post may seem long but its quite short when put into practice so don’t be intimidated by it.
To address these problems I documented my custom solution below.

Step 1:
-install “ToolBox” plugin from the plugin store.

step 2:
-Add a “Javascript to Bubble” element to the page

  • in suffix add: CurrPos
    -tick “publish value”
    -value type = Number
    -tick “Value is a List”
    -optional (make the element 1 x 1 and put it in the corner of the page)

Step 3:
-in workFlows trigger an action either by element click or when a condition is true → Do action → Plugins → Run Javascript

  • Enter the code below:

//initialize variables

var startPos;

var geoOptions = {

enableHighAccuracy: true,

setTimeout: 25000

}

var geoSuccess = function(position) {

startPos = position;

LAT = position.coords.latitude;

LON = position.coords.longitude;

// return accquried location to bubble (value is a list)

bubble_fn_CurrPos([[LAT], [LON]]);

};

var geoError = function(error) {

// return values out of range of any lat or lon value eg. 

//5000 - 20000. its a way of catching errors or if user blocked location

if(error.code == 1) {

  bubble_fn_CurrPos([[5001], [5001]]); 

//User decided not to share your position

} else if(error.code == 2) {

bubble_fn_CurrPos([[5002], [5002]]); 

//The network is down or the positioning service can’t be reached

} else if(error.code == 3) {

bubble_fn_CurrPos([[5003], [5003]]); 

//The attempt timed out before it could get the location data

} else {

bubble_fn_CurrPos([[5000], [5000]]); 

//Geolocation failed due to unknown error or turned off

}

};

if (navigator.geolocation){

navigator.geolocation.watchPosition(geoSuccess, geoError, geoOptions);

} else {

bubble_fn_CurrPos([[4000], [4000]]); //Geo Location not supported on the user’s browser

};

the code above checks if the browser supports geo location and if it does it attempts to get the users current location. if it gets the location it returns the live location of the user like a car gps. if the user blocks the location or location is truned off it send an error code in the form of latitude and longitude (see code for comments on error codes) .
IF you only need the current location of the user to lets say show all stores near the user’s location , find and cahnge these two lines of code above:

var startPos;
var geoOptions = {
enableHighAccuracy: true,
setTimeout: 25000
}

TO

var geoOptions = {
enableHighAccuracy: false,
setTimeout: 25000
}

AND

if (navigator.geolocation){
navigator.geolocation.watchPosition(geoSuccess, geoError, geoOptions);
} else {
bubble_fn_CurrPos([[4000], [4000]]); //Geo Location not supported on the user’s browser
}

TO

if (navigator.geolocation){
navigator.geolocation.getCurrentPositionPosition(geoSuccess, geoError, geoOptions);
} else {
bubble_fn_CurrPos([[4000], [4000]]); //Geo Location not supported on the user’s browser
}

HOWEVER if you are tracking the live location of the user and you are finished tracking their location its good practice to stop the tracking :
in WorkFlows ad an action through element click or when a condition is true → Plugins → Run Javascript
enter the code below:

navigator.geolocation.clearWatch(geoSuccess);

TIPS: if you wish to use this solution you cannot use the bubble provided expressions to get the user’s current location. You have to refrence the “Javascript to Bubble” element that you added to the page. eg.
JavaScriptToBubble A’s Value List:First Item (this will give you the Latitude)
JavaScriptToBubble A’s Value List:Last Item (this will give you the Longitude)

2 Likes

Hi,

I tried using this custom code, however I am facing an error as attached
Screen Shot 2021-05-29 at 5.15.55 PM

@sshobha23 I usually get those when I take more thank 30 seconds to allow or block location access.

Also verify that the page is not using the bubble built in expression
“Get Current Geographic Location”
Do so by creating a quick test page with no elements and implement only the code provided.

Thank you … I was using Get Current Geographic Location. Removed it and it worked. Thanks a lot !!