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)
