Am I on track with this observation?

Question

Am I on track with this observation?

I am currently using the following service:

 getPosition(): Observable<Object> {
    return Observable.create(observer => {
        navigator.geolocation.watchPosition((pos: Position) => {
            observer.next(pos);
            observer.complete();
        }),
        () => {
            console.log('Position is not available');
        },
        {
            enableHighAccuracy: true
        };
    });
}

My intention was to utilize it in this way:

this.getLocationService.getPosition().subscribe((pos: Position) => {
        self._latitude = pos.coords.latitude;
        self._longitude = pos.coords.longitude; }

However, I encountered an issue where the expected behavior did not occur. I anticipated that whenever the position changes, the latitude and longitude values would also update simultaneously. Unfortunately, this does not happen as intended.

javascript typescript geolocation angular rxjs

Answer 1

Answer №1

One potential problem arises due to the Observable contract

Understanding the Observable Contract

The concept of “The Observable Contract” can be found in various sources and documentation related to Observables, including the original Rx Design Guidelines from Microsoft that outlined the Rx.NET version of ReactiveX. This page serves as a summary of The Observable Contract.

Notifications
An Observable communicates with its observers through different notifications:
OnNext
sends an item emitted by the Observable to the observer

OnCompleted
signals successful completion of the Observable and indicates there will be no more items emitted

...

Hence, if you wish to continue triggering events, refrain from calling the completed method

 getPosition(): Observable<Object> {
    return Observable.create(observer => {
        navigator.geolocation.watchPosition((pos: Position) => {
            observer.next(pos);
            // keep sending next without completing
            // until position is fully processed
            //observer.complete();
        }),
        ...

Answer 2

One potential problem arises due to the Observable contract

Understanding the Observable Contract

The concept of “The Observable Contract” can be found in various sources and documentation related to Observables, including the original Rx Design Guidelines from Microsoft that outlined the Rx.NET version of ReactiveX. This page serves as a summary of The Observable Contract.

Notifications
An Observable communicates with its observers through different notifications:
OnNext
sends an item emitted by the Observable to the observer

OnCompleted
signals successful completion of the Observable and indicates there will be no more items emitted

...

Hence, if you wish to continue triggering events, refrain from calling the completed method

 getPosition(): Observable<Object> {
    return Observable.create(observer => {
        navigator.geolocation.watchPosition((pos: Position) => {
            observer.next(pos);
            // keep sending next without completing
            // until position is fully processed
            //observer.complete();
        }),
        ...

Answer 3

Answer №2

A comma out of place can cause quite a headache, it's important to properly manage the watcher when unsubscribing and pass any errors along to the observer.

public $getDeviceLocation():Observable<Position> {
    return Observable.create(observer => {

        const onSuccess:PositionCallback = (pos:Position) => {
            observer.next(pos);
        };

        const onError:PositionErrorCallback = (error) => {
            observer.error(error);
        };

        const options:PositionOptions = this.locationOptions();

        const watcher:number = navigator.geolocation.watchPosition(onSuccess, onError, options);
        return () => {
            navigator.geolocation.clearWatch(watcher);
        };
    });
}

Answer 4

A comma out of place can cause quite a headache, it's important to properly manage the watcher when unsubscribing and pass any errors along to the observer.

public $getDeviceLocation():Observable<Position> {
    return Observable.create(observer => {

        const onSuccess:PositionCallback = (pos:Position) => {
            observer.next(pos);
        };

        const onError:PositionErrorCallback = (error) => {
            observer.error(error);
        };

        const options:PositionOptions = this.locationOptions();

        const watcher:number = navigator.geolocation.watchPosition(onSuccess, onError, options);
        return () => {
            navigator.geolocation.clearWatch(watcher);
        };
    });
}

Am I on track with this observation?

Answer №1

Understanding the Observable Contract

Notifications

Answer №2

Similar questions

Creating automatic page additions using Node.js on Heroku?

"Transforming a query into a JSON array - a step-by-step

Ajax: Why am I receiving an error response instead of a successful one?

Ionic 2 encountering issue with `ctorParameters.map` not being a function error

Is there a way to eliminate the legend symbol for just one legend in Highcharts?

The server-side PHP script may not always successfully respond to an Ajax call from the client

When using create-react-app, the value of 'process.env.NODE_ENV' can be accessed as either a string or a process object during runtime

What is the best way to fill a list-group using JavaScript?

What could be causing Jquery's $.ajax to trigger all status codes even when the call is successful?

Utilize Material-UI in Reactjs to showcase tree data in a table format

Creating randomized sequences using JavaScript

The incorrect type is being assigned to an array of enum values in Typescript

Does Chrome have a feature that disables event listeners?

"Learn how to dynamically change the color of a button in Angular after it has been clicked

What is the syntax for creating a zip function in TypeScript?

Why won't the div move when I click it?

In Node.js and Postgresql, encountering the error "Trying to access a property that is undefined" is common and can be frustrating

'This' loses its value within a function once the decorator is applied

How does Vue handle the situation when the value of an input field does not match the bound "data"?

Removing AWS-CDK Pipelines Stacks Across Multiple Accounts