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

Utilize an RxJS observable within a standard Express.js middleware function

The React application is unable to communicate with my Express application in a production environment, despite functioning properly during development

Evaluating the criteria and presenting two distinct notifications with setCustomValidity

How to play audio with a source path that includes the special character "%" in JavaScript

Using JavaScript to assign the title property to an <a> tag

Angular 2 Return {responseBody: "assigned variable with [object Object]"}

I am looking to pair a unique audio clip with each picture in my collection

How to locate and extract specific data from a webpage table using JavaScript and Node.js for web scraping and storing in an array of objects

Guide on setting up and configuring the seeder in MikroORM

Highcharts introduces shared tooltips for specific data series

Is it possible to extract specific columns from the Convex database?

The issue of Three.js Texture not displaying during loading

Error Found: Syntax Error - 'if' statement not recognized

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

The scenario of two users simultaneously gaining control access in socket.io creating a race condition

What is the correct approach for detecting object collisions in Phaser 3?

Permanently dismiss Bootstrap 4 alert using a cookie

JavaScript Alert function doesn't wait for execution

How can I set ion-option to be selected by tapping instead of having to click OK?

Creating a Higher Order Component (HOC) for your Next.js page