How to make HTML5 Geolocation more accurate? - javascript

I've been playing with the HTML5 Geolocation options and noticed that the results can be a bit erratic and wondered if there was a way to get them more consistent.
I've been doing all of my tests on an iphone 5 and just using the standard getCurrentPosition code with enableHighAccuracy: true and enableHighAccuracy: false, but sometimes when I click the code to get my position on a Google map it is sometimes about 0.25-0.5 mile out - yet (and this is a biggie) if I go to the Maps app on the phone it moves around a bit and then gets my position bang on.
Is there something I can do to get the same level of accuracy?
Speaking of accuracy - what does the position.coords.accuracy command actually do or mean? I've had a map position bang on where I am yet it says something like 1200 and I've had it show the pin about 400 yards away from my location and I get 165
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError,{maximumAge:600000, timeout:5000, enableHighAccuracy: true});
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
function showPosition(position) {
var x = document.getElementById("demo");
var marker = new google.maps.Marker({position: {lat:position.coords.latitude, lng:position.coords.longitude}, map: map, title: 'X'});
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude + "<br>Accuracy: " + position.coords.accuracy;
}
Apologies I'm new to posting in this forum.

position.coords.accuracy is a measurement of meters. If you were to draw a circle around the Lat/Lng returned as its center and "accuracy as its radius then the UA suggests that your "real" location is in that circle somewhere.
enableHighAccuracy = true may remove mobile phone towers and wi-fi distribution points from the heuristic GPS calculation but I too am disappointed at the difference between a Chrome GPS mapped to Google Map as opposed to the Maps App. Also indoor readings could be few and far between if you go the accuracy route.
Experimenting with some algorithms where don't rely on it unless the accuracy is <= the last one (or until Xms or Y>accuracy readings have been received) may help.

Related

Why is JavaScript geolocation only Approximate?

No matter how I use the JavaScript:
position.coords.latitude;
position.coords.longitude;
The returned coordinates are always at least a few city blocks off.
So - it will show the "start point" or "Your location" as a few streets over?
This approximate result seems new, as the code I used before produced a more accurate result.
I have tested on all browser's from a "https" web page.
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + '/' + position.coords.longitude;
}
</script>
Has something changed?
Why is the produced coordinates only approximate?
This is a tradeoff between speed and accuracy. Gelocation.getCurrentPosition() at MDN details the optional parameter enableHighAccuracy
JavaScript geolocation is only an approximation of the device's actual location because it relies on the device's built-in GPS, Wi-Fi, IP address lookup and/or network triangulation to determine your location. Additionally, the Geolocation API provides an estimated location, not an exact location. The accuracy of the location information can vary greatly and can be influenced by various factors, including the type of device, its settings, and the environment (buildings, trees, etc) in which it is used.
I used your function and indeed the latitude and longitude coordinates were not exact, there is a difference of a few meters (more than 30-40).

Google Chrome: Override geolocation via console

So a little background for my question; I am writing a simple driving instructions web application using Google Maps directions API which provides me with a LatLng path along with text instructions.
In order to test this application (without driving around in a car) I need to simulate a geolocation-path. Google Chrome supports overriding geolocation data via the sensors developer settings, which works fine with one coordinate at the time.
So my question is - is it possible to set the browsers navigator.geolocation data via the console (i.e. javascript api) instead manually updating the value in the sensors settings menu?
I know that in this case I could just use another input source than the browser geolocation data and use a static array of LatLng's, or override the browsers navigator.geolocation.getCurrentPosition, but I figured that it would be more sophisticated to override the sensors instead.
Thanks in advance.
One way is to override the function navigator.geolocation.getCurrentPosition with your own custom function. Inside the custom function you can customize the value of latitude & longitude.
var customPosition = {};
customPosition.coords = {};
customPosition.coords.latitude = 41.89;
customPosition.coords.longitude = 2.89;
navigator.geolocation.getCurrentPosition = function(success, error){
success(customPosition);
};
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log("latitude: " + latitude);
console.log("longitude: " + longitude);
}

Geolocation doesn't work with cordova

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.

Detect Google Static StreetView API Imagery availability

I know there are at least a couple of questions like this
detecting "we have no imagery" of google maps street view static images
How can I tell if Google's Streetview Image API Returns "Sorry, we have no imagery here" (ie. NULL) Result?
These articles offer a couple of solutions. The two most popular I've seen here and via Google searaches are:
Detecting the size of the image to determine if you got a "good" image or not from the google static image API
Call the getPanoramaByLocation service to determine if streetview is available for a location
Unfortunately, I don't want to use the first solution because it feels like the hack, and the second solution does not always seem to work.
var center = new google.maps.LatLng(latitude, longitude);
var streetViewService = new google.maps.StreetViewService();
var maxDistanceFromCenter = 75; //meters
streetViewService.getPanoramaByLocation(center, maxDistanceFromCenter, function (streetViewPanoramaData, status) {
if (status === google.maps.StreetViewStatus.OK) {
var key = /**smarty** #mapKey# **smarty**/;
var url = 'http://maps.googleapis.com/maps/api/streetview?size=320x320&location=' + latitude + ',%20' + longitude + '&sensor=false&key=' + key;
jQuery('.ui-page-active .streetView').attr('src', url);
} else {
console.log('error calling street view');
}
});
};
This code will correctly determine if panoramic imagery is available for a location, BUT sometimes static imagery is not available for that exact same location.
I started at 100 for my getPanoramaByLocation radius and that seemed like a safe number, but then I found a case where I was getting the "Sorry, we have no imagery here" error. So I went to 75, now I have to go to 50.
It seems like getPanoramaByLocation is not a safe indicator of static streetview imagery being available, or maybe it is but there's a particular value for the radius that should be used. I can't find it in the docs though. So my question: what's the safest radius to use for my maxDistanceFromCenter?

Google maps api v3, defining user current location

function onPositionUpdate(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var markerPoint = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: markerPoint,
map: map,
title: 'Your Location'
});
}
function button_clicked() {
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(onPositionUpdate);
else
alert("navigator.geolocation is not available");
}
This code is running correctly and shows user location. when I try this at home this shows correct address but when I try this at another location this code doesn't show correct address. why? I dont know how this code run exactly(does this code define for IP or other information)
You can check if another program can find you. If not, it might be that its not your code which is incorrect:
http://html5demos.com/geo
Some security measures might cause that the client won't share location informations automatically.
Have you tried :
navigator.geolocation.getCurrentPosition(onPositionUpdate() );
Not sure if your callback has to have brackets or not. It's something I would try.
I also noticed that geolocation takes a little while to narrow down the approximation to a smaller radius. Might have to call position update.

Categories