I have an ionic 4 app which uses cordova and the google maps api. I am using the HTML5 geoloction plugin which watches the device 's position as the user moves and then generates a new googleMaps marker and displays it on the map.
this.watchLocation = await this.geolocation
.watchPosition()
.subscribe(location => {
this.map.animateCamera({
target: {
lat: location.coords.latitude,
lng: location.coords.longitude
},
zoom: 16,
duration: 1000
});
this.marker.setPosition({
lat: location.coords.latitude,
lng: location.coords.longitude
});
With the code above, i have tested the app on a Samsung note 9 and the results are 100% accurate. I have also tested the same app on other android devices (Galaxy A20 and Huawei Y5) and the results are not accurate, instead the marker jumps out of position for about 50 to 200 meters from my position.
Galaxy note 9 results:
Try setting the enableHighAccuracy option to true. The docs describe it as follows:
The PositionOptions.enableHighAccuracy property is a Boolean that
indicates the application would like to receive the best possible
results. If true and if the device is able to provide a more accurate
position, it will do so. Note that this can result in slower response
times or increased power consumption (with a GPS chip on a mobile
device for example). On the other hand, if false (the default value),
the device can take the liberty to save resources by responding more
quickly and/or using less power.
Also refer to related thread Very High Accuracy in Html5 Geolocation
Related
I am trying to add to my leaflet map a layer with current weather. For that I am using this leaflet plugin https://github.com/buche/leaflet-openweathermap that is using this call:
https://tile.openweathermap.org/map/{layer}/{z}/{x}/{y}.png?appid={API key}
The free version of OWM is offering 60 calls per minute, the problem is that every time that I zoom or drag the map 12 petitions to the API are being requested. I thought the free version with the 60c/m should be more than enough for my app, but as soon I zoom few times the API key gets blocked. Is there a better way to work around this?
The more tiles your map requests, the sooner you reach the limit. In order to reduce the amount of tiles requested (with a cost to user experience), consider limiting zoom/drag options.
// change options according to your needs
let mapOptions = {
zoomControl: false,
scrollWheelZoom: false,
boxZoom: false,
dragging: false
}
let map = L.map('map', mapOptions);
I have the following code in my app:
var geo = { lat: 0, lon: 0 };
navigator.geolocation.getCurrentPosition(
function( position ) {
// set global vars
geo.lat = position.coords.latitude;
geo.lon = position.coords.longitude;
},
function( error ) {
// handle error
geolocationError( error );
},
{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }
);
For one reason or another the location that I get in my app using the above code is very different (100's of meters, sometimes a 1KM or more) than what is displayed in the native map application (i.e. iOS Maps). Why is this?
It's particularly a problem in places where there is no Wifi and I am indoors. For example, recently in an airport my position in the native map application was very accurate; I was positioned in the right terminal - but when I opened my app and refreshed it many times over several minutes the position wasn't anywhere near the terminal I was in, in fact I was about 1KM from the airport.
What do I need to do to get at the very least, the geolocation that the native apps are able to get?
I ran into this issue multiple times before - there isn't anything you can really do about it even if you set enableHighAccuracy to true. It's an issue with the HTML5 geolocation method. Turning on wifi and bluetooth increases the accuracy, but you can't guarantee a user will do that every time.
Best of luck.
I am creating a browser app where, one of the pieces of functionality, is that the user is placed on a map, and then the surrounding area is searched for nearby "things." It is important (and a requirement) that I am as accurate as possible since the nearby location makes a big difference to what is shown to the user.
In order to place the person on the map, I wrote the below code (there is a bit more, but I'm leaving that part out). But, in every case, I am seeing the accuracy range from right on top of my location, to up to a few hundred meters away. There doesn't seem to be any rhyme or reason as to why.
I am outside when I am measuring. I am disconnected from any WiFi (but my WiFi is enabled). I am testing iOS devices on Safari and Chrome, and I am testing Android devices on Chrome. The results are similar across all devices.
One thing I have noticed is that I see that the phones are making requests for location. I see the GPS symbol show up (briefly) on my Android devices. I can see that Safari and Chrome have made recent location requests in the Apple Location Settings. In addition, when I navigate the user to the location (which breaks out into apps like Google Maps or Apple Maps), the location is very accurate and found immediately.
Am I doing something wrong here? Is there something I can do to increase accuracy?
// Attempt to get low-accuracy location if high cannot be retrieved.
function handleLocationError_high(error) {
if(error.code == error.TIMEOUT) {
// Attempt low accuracy if a timeout occurs.
navigator.geolocation.getCurrentPosition(
locationSuccessCallback,
handleLocationError_low,
{timeout: 10000, maximumAge: 0, enableHighAccuracy: false});
} else {
handleLocationError_low(error);
}
}
// Handle the error if location cannot be retrieved at all.
function handleLocationError_low(error) {
console.log('No location found!');
}
// Geolocation callback if there is success in getting the golocation (high or low accuracy).
function locationSuccessCallback(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
// ...place the user on the map.
}
// Try HTML5 geolocation.
// Test for support of geolocation. If it is not supported, error.
// Next, attempt to get high accuracy (GPS) position. If that times out, get the low accuracy position.
if(!navigator.geolocation) {
handleLocationError_low();
return;
}
navigator.geolocation.getCurrentPosition(
locationSuccessCallback,
handleLocationError_high,
{timeout: 5000, maximumAge: 0, enableHighAccuracy: true});
hi sorry for my english I'll do my best to explain my problem
I'm making a web application and I'm using google map api to track my position
but the problem is that the position is not exact , its not wrong but its near of me and every browser gives an other position also near of me .
besides my iphone gives the exact position when i use the application of tracking (iphone Maps),
so i tried to open my application on my iphone with safari but its the same problem.
this is the code :
navigator.geolocation.getCurrentPosition(function(position){
var lng=position.coords.longitude;
var lat=position.coords.latitude;
var map = new google.maps.Map(document.getElementById("map_canvas"),{
zoom: 19,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.SATELLITE
});
},geo_error,geo_options);
function geo_error() {
alert("Sorry, no position available.");
}
var geo_options = {
enableHighAccuracy: true,
maximumAge : 3000,
timeout : 27000
};
Are you sure the iPhone application gives the exact position? I believe it can be normal that the given position is approximate because it's calculated through the nearest mesh. Maybe some of your personal data detained by Apple corrupt the accuracy of the position.
Try to test it on another device.
I am programming a page with a Map where I need to capture the location of the Tap/Click on a map and store the coordinates. I am using OpenLayers js. On desktop browsers (IE/FF/Chrome), this is working fine. On mobile devices, the tap is getting captured correctly on the default Android browser (both in real devices and emulators).
However on mobile webkit browsers (iPhone Safari & Android Chrome Beta), we are having a problem where the tap is getting captured for a few pixels higher (towards the north) of the actual tap. The error is not fixed (so, I can't just add 100 to the event's xy to recalibrate the top.)
Here is the code I am using as the clickhandler:
OpenLayers.Control.ClickHandler = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.trigger
}, this.handlerOptions
);
},
trigger: function(e) {
that.inputLonLat_EPSG4326 = null;
var lonlat = that.inputMap.getLonLatFromViewPortPx(e.xy);
that.logMessage("XY " + e.xy);
that.logMessage("LonLoat " + lonlat);
that.inputMarkers.clearMarkers();
that.inputMarkers.addMarker(new OpenLayers.Marker(lonlat,that.icons["green"].clone()));
lonlat.transform(that.inputMap.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
that.inputLonLat_EPSG4326 = lonlat;
// For the moderation sections
$('#alertLatitude').val(that.inputLonLat_EPSG4326.lat);
$('#alertLongitude').val(that.inputLonLat_EPSG4326.lon);
//lonLat2.transform(that.inputMap.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
that.logMessage("Stored lat " + that.inputLonLat_EPSG4326.lat);
that.logMessage("Stored lon " + that.inputLonLat_EPSG4326.lon);
that.callFunction(that.inputMapListener, e);
}
});
Should I be doing anything differently? Has anybody else seen the inaccuracy problem on mobile webkit browsers while using OpenLayers?
I finally found the reason this is happening. It seems that on webkit mobile browsers, the x,y that the library seems to be getting (or deriving) is based on the page and not on the element in which the map is housed. Hence the calculations are off. It seems that the inaccuracy can't be solved by adding the xy of the map element or some such DOM-based figure too (I tried it.)
I solved it by housing the Map in an IFrame and then have the iFrame housed within the map element. This way the x,y as received by the map click handler is accurate within the iFrame and hence the lat, long is also accurate. Since both the parent and iFrame are from the same domain, there are no issues communicating back and forth.
To complete the context, the iFrame based solution is definitely compatible with BB 9 & above, Android Chrome, Android Default and iPhone Safari, as tested by me.
Check out the solution at - http://suat1.vocanic.net//saralee/apps/dengue_alert/ and the iFrame at http://suat1.vocanic.net//saralee/apps/dengue_alert/mobileMap.php (WIP versions liable to change or break with time)