The navigator.geolocation.watchPosition call did not return any available position information

Question

The navigator.geolocation.watchPosition call did not return any available position information

I offer a service that monitors the position of devices:

getLocation(opts): Observable<any> {
    return Observable.create(observer => {
        if (window.navigator && window.navigator.geolocation) {
            window.navigator.geolocation.watchPosition((position) => {
                observer.next(position);
            }, (error) => {
                switch (error.code) {
                    case 1:
                        observer.error('errors.location.permissionDenied');
                        break;
                    case 2:
                        observer.error('errors.location.positionUnavailable');
                        break;
                    case 3:
                        observer.error('errors.location.timeout');
                        break;
                }
            }, opts);
        } else {
            observer.error('errors.location.unsupportedBrowser');
        }
    });
}

then retrieve latitude and longitude in the component:

ngOnInit() {
    var source = this.locationService.getLocation({enableHighAccuracy:true, maximumAge:30000, timeout:27000});
    source.subscribe(pos => {
        this.lat = pos.coords.latitude;
        this.long = pos.coords.longitude;
    }, err => {
        this.err = err;
        console.log(err);
    });
}

This code works well on browsers on MacBook and iPhone, allowing for position updates when the device moves.

However, on my iPad (which is Wi-Fi only and lacks GPS), it retrieves the position initially but after a few seconds, the service returns error code 2 indicating position unavailability, and the browser stops updating the position. I'm unsure if it has stopped working or continues to run but constantly returns error code 2.

My queries are:

Does watchPosition require GPS to function? My MacBook also lacks GPS.
If an error occurs and is returned from the observable, do I need to resubscribe to obtain data (position) again, or should I simply wait until the error resolves itself?

angular typescript geolocation rxjs

Answer 1

Answer №1

Utilizing the watchPosition function, I am able to obtain location data from the user. You can create a subject with an optional default location. Upon loading the component, simply call the getLocation method and utilize an async pipe within your component to display the retrieved data.

Check out the Live Demo here!

location.component.html

<div *ngIf="coordinates | async">
  <p>
    {{coordinates | async | json}}
  </p>
</div>

location.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {
    LocationService
} from '@app/core';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-location',
    templateUrl: './location.component.html',
    styleUrls: ['./location.component.scss']
})
export class LocationComponent implements OnInit {
    coordinates: Observable<Object>;
    constructor(private locationService: LocationService) { }

    ngOnInit(): void {
        this.coordinates = this.locationService.getLocation();
    }
}

location.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
@Injectable({
    providedIn: 'root'
})
export class LocationService {
    public watchId: number;
    public locationTrackingActive = false;
    public currentLocation: { latitude: number, longitude: number } = { latitude: undefined, longitude: undefined };
    private reactiveDeviceLocation$: Subject<Object>;

    constructor() {
        this.reactiveDeviceLocation$ = new BehaviorSubject<Object>(this.currentLocation);
    }

    getLocation(): Observable<Object> {
        const options = { enableHighAccuracy: true, maximumAge: 60000, timeout: 30000 };
        this.watchId = navigator.geolocation.watchPosition((position) => {
            this.locationTrackingActive = true;
            this.currentLocation = { latitude: position.coords.latitude, longitude: position.coords.longitude };
            this.reactiveDeviceLocation$.next(this.currentLocation);
        },
        (err) => {
            console.log(err);
            this.locationTrackingActive = false;
        },
        options);
        return this.reactiveDeviceLocation$;
    }
}

Answer 2

Utilizing the watchPosition function, I am able to obtain location data from the user. You can create a subject with an optional default location. Upon loading the component, simply call the getLocation method and utilize an async pipe within your component to display the retrieved data.

Check out the Live Demo here!

location.component.html

<div *ngIf="coordinates | async">
  <p>
    {{coordinates | async | json}}
  </p>
</div>

location.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {
    LocationService
} from '@app/core';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-location',
    templateUrl: './location.component.html',
    styleUrls: ['./location.component.scss']
})
export class LocationComponent implements OnInit {
    coordinates: Observable<Object>;
    constructor(private locationService: LocationService) { }

    ngOnInit(): void {
        this.coordinates = this.locationService.getLocation();
    }
}

location.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
@Injectable({
    providedIn: 'root'
})
export class LocationService {
    public watchId: number;
    public locationTrackingActive = false;
    public currentLocation: { latitude: number, longitude: number } = { latitude: undefined, longitude: undefined };
    private reactiveDeviceLocation$: Subject<Object>;

    constructor() {
        this.reactiveDeviceLocation$ = new BehaviorSubject<Object>(this.currentLocation);
    }

    getLocation(): Observable<Object> {
        const options = { enableHighAccuracy: true, maximumAge: 60000, timeout: 30000 };
        this.watchId = navigator.geolocation.watchPosition((position) => {
            this.locationTrackingActive = true;
            this.currentLocation = { latitude: position.coords.latitude, longitude: position.coords.longitude };
            this.reactiveDeviceLocation$.next(this.currentLocation);
        },
        (err) => {
            console.log(err);
            this.locationTrackingActive = false;
        },
        options);
        return this.reactiveDeviceLocation$;
    }
}

Answer 3

Answer №2

Encountering a peculiar bug while using navigator.geolocation.watchPosition in an Angular2 service with RxJS, Meteor, and various other components on specific browsers. The issue seems to be related to "this" going out of scope after the initial callback, rendering it inaccessible in subsequent callbacks. To resolve this, a locally scoped reference to the current class needs to be created:

startTracking() {
    let that = this; //The solution            
    let opts = {maximumAge: 60000, timeout: 30000}
    this.watchId = navigator.geolocation.watchPosition((position) =>
        {
            console.log(position);
            that.locationTrackingActive = true;
            that.reactiveDeviceLocation.next(position.coords);
        },
        (err) =>
        {
            console.log(err);
            that.locationTrackingActive = false;
        },
        opts);

}

No need to resubscribe to watchPosition post-error as it will keep attempting until a signal is received. By utilizing a BehaviorSubject for your observable (as seen in reactiveDeviceLocation above), you can establish a default starting location and only update it upon success. This approach ensures that new clients subscribing will receive the default or most recent location and can then work with that information until watchPosition successfully updates the subject.

The setup within the same service looks like this:

reactiveDeviceLocation: Rx.BehaviorSubject<Object> = new Rx.BehaviorSubject<Object>({latitude:37.5, longitude:122});

getReactiveDeviceLocation() {
    return this.reactiveDeviceLocation;
}

Subsequently, any service consumer can call:

MyService.getReactiveDeviceLocation.subscribe((pos) => {
   console.log(pos); //Last known location.
})

Answer 4

Encountering a peculiar bug while using navigator.geolocation.watchPosition in an Angular2 service with RxJS, Meteor, and various other components on specific browsers. The issue seems to be related to "this" going out of scope after the initial callback, rendering it inaccessible in subsequent callbacks. To resolve this, a locally scoped reference to the current class needs to be created:

startTracking() {
    let that = this; //The solution            
    let opts = {maximumAge: 60000, timeout: 30000}
    this.watchId = navigator.geolocation.watchPosition((position) =>
        {
            console.log(position);
            that.locationTrackingActive = true;
            that.reactiveDeviceLocation.next(position.coords);
        },
        (err) =>
        {
            console.log(err);
            that.locationTrackingActive = false;
        },
        opts);

}

No need to resubscribe to watchPosition post-error as it will keep attempting until a signal is received. By utilizing a BehaviorSubject for your observable (as seen in reactiveDeviceLocation above), you can establish a default starting location and only update it upon success. This approach ensures that new clients subscribing will receive the default or most recent location and can then work with that information until watchPosition successfully updates the subject.

The setup within the same service looks like this:

reactiveDeviceLocation: Rx.BehaviorSubject<Object> = new Rx.BehaviorSubject<Object>({latitude:37.5, longitude:122});

getReactiveDeviceLocation() {
    return this.reactiveDeviceLocation;
}

Subsequently, any service consumer can call:

MyService.getReactiveDeviceLocation.subscribe((pos) => {
   console.log(pos); //Last known location.
})

The navigator.geolocation.watchPosition call did not return any available position information

Answer №1

location.component.html

location.component.ts

location.service.ts

Answer №2

Similar questions

Error with Typescript types when using Styled Components

Ensuring Valid Numbers in Angular 2

Exploring the concepts of type intersection in TypeScript

Can NODE_PATH be configured in Typescript?

I'm having difficulty updating the Angular CLI version

Issue with rendering HTML tags when replacing strings within Ionic 2 and Angular 2

Utilizing variables for Protractor command line parameters

Having trouble resolving all parameters for 'Router' in Angular 2 testing with Router

Discover the perfect way to implement true lazyloading using NativeScript Angular tabs and BottomNavigation

Obtaining Data from a Database Using Angular

Generate a byte array in JavaScript

How to efficiently update a child component in React using UseState and establish a connection back to the parent component

Ionic - InAppBrowser continuously redirects to external web browser instead of staying within the in-app browser

Comparing the Calculation of CSS Selector Specificity: Class versus Elements [archived]

Encountering an issue in Angular 8 with ng2-chart where the error message reads: "RangeError: Maximum call stack size

What is the correct way to specify the data type for the useState hook when I intend to store an array of objects?

Attempting to execute a post request followed by a get request

Tips on integrating Ionic 2 with Angular 2 services

"Overcoming obstacles in managing the global state of a TypeScript preact app with React/Next signals

Checking for valid positive numbers and detecting invalid dates with Angular form techniques