I am using capcitor geolocation plugin to find current location coordinates(latitude and longitude).
const coordinates = await Geolocation.getCurrentPosition({enableHighAccuracy:true});
const center = {lat: coordinates.coords.latitude, lng: coordinates.coords.longitude};
But in Iphone its taking around 45sec to 1.5 mins to fetch current location.
I have alao used below code. But this is sometime fast sometime slow.
const id = await Geolocation.watchPosition({}, (coordinates, err) => {
Geolocation.clearWatch({id});
if(err) {
console.log(err)
}
console.log('getCenter ios',coordinates);
const center = {lat: coordinates.coords.latitude, lng: coordinates.coords.longitude};
});
Is there any other implementation or free/paid plugin available, which can fetch current location coordinates faster on iphone.
Related
I'm trying to make an Uber-like location picker with MapBox. I would like to 'freeze' map on fixed marker (that's in center of the map) when zooming.
By default, whenever you zoom, map is actually zooming to the click/pinch point where you started the zoom rather than to map center. I almost got it but now I'm battling the centering transition (I don't want it).
Is there any trick to achieve that? Currently I'm trying to work with mapbox events zoomend and move. Unfortunately zoom throws too many events and the map is lagging like hell:
let markerLocation = map.getCenter();
const marker = new mapboxgl.Marker()
.setLngLat(markerLocation)
.addTo(map);
map.on(`zoomend`, (e) => {
map.flyTo({
center: markerLocation,
});
});
map.on(`move`, (e) => {
if (map.isZooming()) {
return;
}
markerLocation = map.getCenter();
marker.setLngLat(markerLocation);
});
Please find the JsFiddle: https://jsfiddle.net/pawelol/kpu8nzh9/2/
Any help will be highly appreciated :)
In the EXIF metadata GPS schema there are two places to store GPS data:
#1-4 Latitude, LatitudeRef, Longitude and LongitudeRef
#19-23 DestLatitude, DestLatitudeRef, DestLongitude and DestLongitudeRef
In theory the first is where the photo was taken, so an iPhone will populate this data. The second are the coordinates of the object in the photo. So if you are on Westminster Bridge and taking a photo of the London Eye, you'd have two slightly different values.
Does anyone know if there's accepted usage of these properties?
Specifically, should Latitude only be set if you have GPS data from either the camera or an external logger, so this could be considered optional? But the DestLatitude would be always set on any, well organized photo collection?
The second is referenced as "destination point".
You can see those in W3 exif, prefixed by gps, which suggests it makes only sense when you record a position relative to a fixed destination point.
You can see that field used in tomchentw/react-google-maps for example:
withScriptjs, withGoogleMap,
lifecycle({
componentDidMount() {
this.setState({
onDirectionChange: () => {
const DirectionsService = new google.maps.DirectionsService();
DirectionsService.route({
origin: new google.maps.LatLng(this.props.latitude, this.props.longitude),
destination: new google.maps.LatLng(this.props.destLatitude, this.props.destLongitude),
travelMode: google.maps.TravelMode.DRIVING,
}, (result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result
});
} else {
console.error(`error fetching directions ${result}`);
}
});
}
});
const DirectionsService = new google.maps.DirectionsService();
In that case, this is to call Google Map in order to launch an itinerary computation.
I am trying to get elevation of clicked location via fetching elevation values from MapQuest elevation profile API
https://developer.mapquest.com/documentation/open/elevation-api/elevation-profile/get/
But I can't find the parameter of getting elevation of only one point not for a route; I mean latLng not latLngCollection.
Here is my code:
var myLocation = e.latlng;
console.log(myLocation);
fetch('http://open.mapquestapi.com/elevation/v1/profile?key=tHXSNAGXRx6LAoBNdgjjLycOhGqJalg7&shapeFormat=raw&latLngCollection='+myLocation)
.then(r => r.json())
.then(data => {
var elevation = data;
console.log(data);
})
Is there is any way to get elevation for only one point?
A one location collection seems to be working as expected.
http://open.mapquestapi.com/elevation/v1/profile?shapeFormat=raw&key=KEY&latLngCollection=51.50631,%20-0.12714
Basically I want to make a web request in second plane (for example when the cell phone is blocked, or not being used) every 4 hours to a web service that receives the current latitude and longitude. is this possible?
I have researched a lot, and apparently there is no way to do this, unless a plugin is used that detects movement and activates geolocation. for example:
https://github.com/transistorsoft/cordova-background-geolocation
my client wants the idea that every 4 hours a web service is consumed that receives the current latitude and longitude and verify the stores that are nearby in the current place
try this inside your function
let config = {
desiredAccuracy: 0,
stationaryRadius: 20,
distanceFilter: 10,
debug: true,
interval: 2000 // Set the interval to your desired time.
};
this.backgroundGeolocation.configure(config).subscribe((location) => {
console.log('BackgroundGeolocation: ' + location.latitude + ',' + location.longitude);
// Run update inside of Angular's zone
this.zone.run(() => {
this.lat = location.latitude;
this.lng = location.longitude;
});
}, (err) => {
console.log(err);
});
// Turn ON the background-geolocation system.
this.backgroundGeolocation.start();
Is it possible in Mapbox GL JS to get the users bearing?
I would like to show the direction in which the user is facing, to assist them in navigating to nearby POI.
I understand that it is possible to set the bearing of the map and also get the current bearing of it, but i need the actual real life bearing of the user.
Kind of the same thing as on Google Maps:
The service is intended to run as an Ionic app on iOS and Android, and the assistance in bearing is a key feature in helping them locate nearby POI on a well populated map.
You can get the user's bearing (if their device has such a sensor) by obtaining a Coordinates object from Gelocation#getCurrentPosition() and reading Coordinates#heading.
Mapbox GL JS has no built-in user interface for displaying a user's heading. Building your own user interface is easy. See this example which uses the symbol-rotation property.
So, after some time spend on this, i thought I'd show how i ended up doing this, in case someone else needs it or have a better solution.
It seems cordova has a built in "heading" property in the position object.
https://github.com/apache/cordova-plugin-geolocation
var heading = $rootScope.position.heading;
First, i make sure that the marker is always pointing in the heading direction, even when the user turns the map, by subtracting the mapBearing(degrees the map has turned from North), from the user heading.
map.on('rotate', function(){
map.setLayoutProperty('drone', 'icon-rotate', heading - map.getBearing())
});
I create an icon, at the users position, add the source and add the layer with the source.
map.on('load', function () {
var point = {"type": "Point", "coordinates": [$rootScope.position.long, $rootScope.position.lat]};
map.addSource('drone', {type: 'geojson', data: point });
map.addLayer({
"id": "drone",
"type": "symbol",
"source": "drone"
}
});
Next i check that heading is actually available, since it only appears to return a value, when the user is moving(only tested on Android so far), and if it is, update the heading of the point.
if($rootScope.position.heading){
var heading = $rootScope.position.heading;
map.setLayoutProperty('drone', 'icon-rotate', $rootScope.position.heading);
};
Finally i update the position of the point, in a "$watch" position.
map.getSource('drone').setData(point);
This way, i can watch the users heading, and the point keeps on track, even when the user rotates the map.
For the users coming here after 2020 (what an year lol), mapbox gl js now supports geolocation which not only provides user's heading but also a bunch of other helpful data:
const geolocate = map.addControl(
new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
)
then listen for geolocate event:
geolocate.on('geolocate', (e) => {
console.log(e);
});
this will give you following object:
{
coords: {
accuracy: number;
altitude: number;
altitudeAccuracy: number;
heading: number;
latitude: number;
longitude: number;
speed: number;
};
timestamp: number;
heading will give you direction of the user. As the geolocate control keeps triggering automatically so can get the user's direction as well as speed and altitude etc in real time and use that to display data driven symbols on map.