I'm working with the HTML5 geolocation api. I'm getting a weird error. i got a function called doGeolocate that is called when the user land on the page. That load the map with the wright location data. And i got a button that recall the same function when ever the user want to recenter the map. But when a user tap the button on a desktop(chrome,opera, safari) except firefox it doesn't work.
While on the other there is no problem. Once debug it seem like the code locationCallback isn't call properly the second time even tho it is on load.
doGeolocate: function(){
if (navigator.geolocation) {
console.log("doGeolocate");
var locationCallback = helper.callback(this, function(position) {
this.initialGeolocationPosition(position);
if(!this.positionMarker){
this.createPositionMarker(position);
}
});
var err = function(err) {
console.log("");
};
var options = {
maximumAge: 0
};
navigator.geolocation.getCurrentPosition(locationCallback,err,options);
}
},
Related
im building an app through phonegap, with a geolocation button.
if a user denies permission for geolocation the first time, how can i ask for permission again when they click the geolocation button again?
my code structure at the moment is:
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, positionError);
} else {
hideLoadingDiv()
showError('Geolocation is not supported by this device')
}
}
function positionError() {
hideLoadingDiv()
showError('Geolocation is not enabled. Please enable to use this feature')
}
You can't.
The only thing you can do is to display the instructions to reactivate the location sharing in his browser's settings (https://support.google.com/chrome/answer/142065?hl=en).
Two ways of doing this:
If you have a version of Chrome bigger than 83.0.4103.97 then use the lock icon in the URL
For older versions of Chrome the bellow code will work fine:
The bellow code only works on Chrome.
Steps:
Open Chrome
Open the console
Copy in the console
var allowGeoRecall = true;
var countLocationAttempts = 0;
Copy in the console the functions
function getLocation() {
console.log('getLocation was called')
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,
positionError);
} else {
hideLoadingDiv()
console.log('Geolocation is not supported by this device')
}
}
function positionError() {
console.log('Geolocation is not enabled. Please enable to use this feature')
if(allowGeoRecall && countLocationAttempts < 5) {
countLocationAttempts += 1;
getLocation();
}
}
function showPosition(){
console.log('posititon accepted')
allowGeoRecall = false;
}
Run the function in the console
getLocation();
After running this you will be asked to allow to share your position. If your response is negative you will be asked again until you agree.
HINT: If your user has a negative response, let him know why you need the coordinates. Is vital for him to understand that this step is vital for the good run of the web app.
This can be reset in Page Info which can be accessed by clicking the lock icon next to the URL and allowing Location
I'm currently working on a mobile application with Intel XDK (In background it's Cordova finally, that's why I put Cordova in title.)
With an Ajax request, I get some adresses and with these adresses I want to calculate the distance between them and the current position of user.
So, I get adresses, I convert them and I make the difference.
But actually, nothing is working !
function codeAddress(id, addresse) {
geocoder.geocode( { 'address': addresse}, function(results, status) {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function(){}, 100);
}
console.log(id);
console.log(addresse);
//document.addEventListener("intel.xdk.device.ready",function(){
if (navigator.geolocation)
{
if (status == google.maps.GeocoderStatus.OK)
{
navigator.geolocation.getCurrentPosition(function(position) {
addressEvent = results[0].geometry.location;
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var position = new google.maps.LatLng(pos.lat, pos.lng)
var resultat = google.maps.geometry.spherical.computeDistanceBetween(addressEvent, position);
console.log(resultat);
console.log(addressEvent);
console.log(pos);
console.log(position);
var convert = Math.floor(resultat);
var finalConvert = convert + " m";
var distance = document.createElement('span');
distance.innerHTML = finalConvert;
distance.className = "geo";
document.getElementsByClassName('meta-info-geo')[id].appendChild(distance);
}, function() {
handleLocationError(true, infoWindow);
});
}
}
//},false);
});
}
In the console.log(id), console.log(addresse), I HAVE results !
Actually i'm getting 4 IDs and 4 adresses.
I checked on all the topics I could find on StackOverFlow, and I had normally to add the line in // with the addEventListener but it changes nothing.
Is there someone who knows how to change that ?
ps : Of course, cordova geoloc is in the build and permissions are granted !
EDIT : I'm targeting Android 4.0 min and iOS 5.1.1. I'm using SDK.
EDIT 2 :
Geolocation frequently does not work the way people expect it to work, for a variety of reasons that have been expressed here and here.
You can experiment with geo by using the "Hello, Cordova" sample app that is in the XDK and also available on GitHub. Try using it on a variety of devices to see how things work. Push the "fine" button to initiate a single geo call for a "fine" location and push the "coarse" button to initiate a single geo call for a "coarse" location. Push the "watch" button to initiate a request for a series of geo data points (set to coarse or fine by pushing one of the single buttons first).
The behavior you get in the Emulate tab will be dramatically different than what you get on a real device. The type of device (Android, iOS, etc.) and the version of that device will influence your results; the manufacturer of the device and your location (inside or outside) will influence your results. Do not assume that making a call to the geo APIs will always give you immediate and reliable data, geolocation hardware does not work that way... In fact, you cannot assume that you can even get a valid result! See the two links I pointed to earlier in the post for some reasons why.
As dojo 1.7> don't provide OnLoad status handling, some nice features such as OnLoad in Jquery not really support by Dojo. Dojo have a similar feature such as ready or DomReady is close to OnLoad, let us have a look.
I had some dojo form fields need to be checked on the page loaded. Those fields mainly was used to hold browser geoLocation information to facilitate user find local business information, I need a OnLoad function to check browser have geoLocation support or not, if it is, dojo script will populate user browser latitude and longitude information to a dojo form fields, other wise, I need enable an other field such as postcode to be changed to "required" to ask user provide his local postcode.
My dojo script looks like:
<script type="text/javascript">
require(["dojo/ready","dojo/dom","dojo/dom-attr"], function(ready,dom,domAttr){
ready(function(){
var Geo = {};
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success, error);
}else{
}
function success(position) {
Geo.lat = position.coords.latitude;
Geo.lng = position.coords.longitude;
populateHeader(Geo.lat, Geo.lng);
}
function error() {
console.log("Geocoder failed");
domAttr.set(dom.byId("criteria_postcode"),"required",true);
}
function populateHeader(lat, lng) {
dom.byId("criteria_latitude").value=Number(lat);
dom.byId("criteria_longitude").value=Number(lng);
}
});
});
</script>
This function supposed will be load on DOM ready, but it never work properly. criteria_postcode field never be set to required in the page.
I also tried to test on submit event function by using dojo script, my code looks like:
<script type="dojo/on" data-dojo-event="submit">
if(this.validate()){
require(["dijit/focus", "dojo/dom", "dojo/domReady!"], function(focusUtil,dom){
// fetch a node by id="someNode"
var pcnode = dom.byId("criteria_postcode");
var latnode = dom.byId("criteria_latitude");
var lngnode = dom.byId("criteria_longitude");
console.log(pcnode.value+"|"+latnode.value+"|"+lngnode.value);
});
return confirm('Form is valid, press OK to submit');
}
This paragraph of dojo script will print out a console log and waiting for user click ok to confirm before submit to server.
Unfortunately, firefox works but not for safari, safari print out the console log after submit, is that true? I was confused.
domReady is the right approach, but instead of doing it aty submit time, you should do it at load time.
also defining all function and then running the navigator.geolocation is better:
<script type="text/javascript">
require(["dojo/dom","dojo/dom-attr","dojo/domReady!"], function(dom,domAttr){
var Geo = {};
function success(position) {
Geo.lat = position.coords.latitude;
Geo.lng = position.coords.longitude;
populateHeader(Geo.lat, Geo.lng);
}
function error() {
console.log("Geocoder failed");
domAttr.set(dom.byId("criteria_postcode"),"required",true);
}
function populateHeader(lat, lng) {
dom.byId("criteria_latitude").value=Number(lat);
dom.byId("criteria_longitude").value=Number(lng);
}
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success, error);
}else{
}
});
</script>
At submit time, you obviously don't need to use dojo/domReady! (DOM is ready otherwise user could not submit)
im building an app through phonegap, with a geolocation button.
if a user denies permission for geolocation the first time, how can i ask for permission again when they click the geolocation button again?
my code structure at the moment is:
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, positionError);
} else {
hideLoadingDiv()
showError('Geolocation is not supported by this device')
}
}
function positionError() {
hideLoadingDiv()
showError('Geolocation is not enabled. Please enable to use this feature')
}
You can't.
The only thing you can do is to display the instructions to reactivate the location sharing in his browser's settings (https://support.google.com/chrome/answer/142065?hl=en).
Two ways of doing this:
If you have a version of Chrome bigger than 83.0.4103.97 then use the lock icon in the URL
For older versions of Chrome the bellow code will work fine:
The bellow code only works on Chrome.
Steps:
Open Chrome
Open the console
Copy in the console
var allowGeoRecall = true;
var countLocationAttempts = 0;
Copy in the console the functions
function getLocation() {
console.log('getLocation was called')
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,
positionError);
} else {
hideLoadingDiv()
console.log('Geolocation is not supported by this device')
}
}
function positionError() {
console.log('Geolocation is not enabled. Please enable to use this feature')
if(allowGeoRecall && countLocationAttempts < 5) {
countLocationAttempts += 1;
getLocation();
}
}
function showPosition(){
console.log('posititon accepted')
allowGeoRecall = false;
}
Run the function in the console
getLocation();
After running this you will be asked to allow to share your position. If your response is negative you will be asked again until you agree.
HINT: If your user has a negative response, let him know why you need the coordinates. Is vital for him to understand that this step is vital for the good run of the web app.
This can be reset in Page Info which can be accessed by clicking the lock icon next to the URL and allowing Location
I'm working on a script that needs to grab my geolocation. It works most of the time, However every now and then the geolocation is not aquired and I have to restart the browser for it to work again. This occurs in Safari and FF (Not tested in IE and Chrome). Does anybody know what could be causing this? I'm using this bit of code from the book "HTML 5".
<script type="text/javascript">
function loadDemo() {
if(navigator.geolocation) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
navigator.geolocation.getCurrentPosition(updateLocation);
}
}
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
if (!latitude || !longitude) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser, but location is currently not available.";
return;
}
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
}
FF sometimes hangs, don't know about safari. It doesnt work in IE yet as far as i know. It seems to work great in Chrome so far.
You can "solve" this by setting a timeout. It still doesn't work but at least the script is terminated after a while. I use this code.
If you you found a good fix please let me know.
navigator.geolocation.getCurrentPosition(
function(position) {
//succes handler
},
function errorCallback(error) {
//error handler
},
{
enableHighAccuracy:false,
maximumAge:Infinity,
timeout:5000
}
);