Acquire the map handler from the service

Question

Acquire the map handler from the service

I'm finding this concept a little tricky to grasp.

retrieveLongitudeById(id: number | string) {
return this.getHoles().pipe(
  map(holes => holes.find(hole => hole.id === +id).lng)
  );
}

I want to access this method from my service and incorporate it into my geolocation component. Any advice on how to do that?

Haversine(): void {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition( x => {

      this.myLat = x.coords.latitude;
      this.myLng = x.coords.longitude;

      this.courseLat = this._mont.getHoleLat();
      this.courseLng = this._mont.getHoleLng();


    console.log(`longitude: ${ this.courseLat } | latitude: ${ this.courseLng }`);
    console.log(`longitude: ${ this.myLat } | latitude: ${ this.myLng }`);


    const myCoords: GeoCoord = {
      latitude: this.myLat,
      longitude: this.myLng
    };

    const dominos: GeoCoord = {
      latitude: this.courseLat,
      longitude: this.courseLng
    };

    this.metres = this._haversine.getDistanceInMeters(myCoords, dominos);
    this.yards = this._haversine.getDistanceInYards(myCoords, dominos);
    this.kilometres = this._haversine.getDistanceInKilometers(myCoords, dominos);
    this.miles = this._haversine.getDistanceInMiles(myCoords, dominos);

    this.metres = this.metres.toFixed(2);
    this.yards = this.yards.toFixed(2);
    this.kilometres = this.kilometres.toFixed(2);
    this.miles = this.miles.toFixed(2);
 });
}

}

Update

export class Hole {
  constructor(public id: number, public name: string, public lat: number, public lng: number) { }
}

const HOLES = [
   new Hole(1, 'Hole 1', 1234567, -12345324)
  ];

I'm trying to retrieve these coordinates!

angular typescript oop rxjs ngrx

Answer 1

Answer №1

To utilize the service in your component, you must import it and inject it properly.

Within your <name>.component.ts file: import {YourService} from "servicePath";

export class NameComponent{
   // injection point
   constructor(private yourService : YourService){
     // call function here (or elsewhere)
     this.yourService.getHoleLng(id).subscribe(...)
   }
}

Alternatively, you can invoke it within a function:

Haversine(): void {
  // assuming id is 1 for demonstration purposes;
  let id = 1; // replace with desired id

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition( x => {

      this.myLat = x.coords.latitude;
      this.myLng = x.coords.longitude;

      forkJoin(
         this.yourService.getHoleLng.pipe(map( lng=> courseLng=lng)),
         this.yourService.getHoleLat.pipe(map( lng=> courseLng=lat))
      ).subscribe( ()=> {
           console.log(`longitude: ${ this.courseLat } | latitude: ${ this.courseLng }`);
            console.log(`longitude: ${ this.myLat } | latitude: ${ this.myLng }`);

         const myCoords: GeoCoord = {
           latitude: this.myLat,
           longitude: this.myLng
         };

         const dominos: GeoCoord = {
           latitude: this.courseLat,
           longitude: this.courseLng
           // latitude: this.courseLat,
           // longitude: this.courseLng
         };

         this.metres = this._haversine.getDistanceInMeters(myCoords, dominos);
         this.yards = this._haversine.getDistanceInYards(myCoords, dominos);
         this.kilometres = this._haversine.getDistanceInKilometers(myCoords, dominos);
         this.miles = this._haversine.getDistanceInMiles(myCoords, dominos);

         this.metres = this.metres.toFixed(2);
         this.yards = this.yards.toFixed(2);
      })    

}

It's crucial to wait for both lat and lng coordinates from your services before proceeding. Using the forkJoin operator ensures that both calls complete before further processing.

Answer 2

To utilize the service in your component, you must import it and inject it properly.

Within your <name>.component.ts file: import {YourService} from "servicePath";

export class NameComponent{
   // injection point
   constructor(private yourService : YourService){
     // call function here (or elsewhere)
     this.yourService.getHoleLng(id).subscribe(...)
   }
}

Alternatively, you can invoke it within a function:

Haversine(): void {
  // assuming id is 1 for demonstration purposes;
  let id = 1; // replace with desired id

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition( x => {

      this.myLat = x.coords.latitude;
      this.myLng = x.coords.longitude;

      forkJoin(
         this.yourService.getHoleLng.pipe(map( lng=> courseLng=lng)),
         this.yourService.getHoleLat.pipe(map( lng=> courseLng=lat))
      ).subscribe( ()=> {
           console.log(`longitude: ${ this.courseLat } | latitude: ${ this.courseLng }`);
            console.log(`longitude: ${ this.myLat } | latitude: ${ this.myLng }`);

         const myCoords: GeoCoord = {
           latitude: this.myLat,
           longitude: this.myLng
         };

         const dominos: GeoCoord = {
           latitude: this.courseLat,
           longitude: this.courseLng
           // latitude: this.courseLat,
           // longitude: this.courseLng
         };

         this.metres = this._haversine.getDistanceInMeters(myCoords, dominos);
         this.yards = this._haversine.getDistanceInYards(myCoords, dominos);
         this.kilometres = this._haversine.getDistanceInKilometers(myCoords, dominos);
         this.miles = this._haversine.getDistanceInMiles(myCoords, dominos);

         this.metres = this.metres.toFixed(2);
         this.yards = this.yards.toFixed(2);
      })    

}

It's crucial to wait for both lat and lng coordinates from your services before proceeding. Using the forkJoin operator ensures that both calls complete before further processing.

Acquire the map handler from the service

Answer №1

Similar questions

Is there a way to dynamically retrieve a JSON element in Typescript?

Footer missing from Tanstack React table

Encountered a mistake while trying to deploy an Angular 2 application on Heroku - received an error message indicating an expected expression but instead got

Using Angular: Embed environment.ts into index.html as a standalone JavaScript file

Setting up "connect-redis" in a TypeScript environment is a straightforward process

Talebook by Syncfusion

Using the jQuery val() Function with a User-Defined Object

Using useEffect with promises causing TypeScript errors

React-aria | Encountering a typescript error with input fields/textfields

The error message "InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' in Angular 6 and Firebase" indicates a problem with the data being passed to the AsyncPipe in

Are the Angular App routerlinks functioning properly in development but encountering issues in the production environment?

What is the best way to set up role redirection following a successful login within my MEAN stack application?

Utilize the full path to load template/styles

AG-Grid hierarchical data structure

The variable 'selectedvalue' is being accessed before it has been initialized

In search of captivating hover animations for Angular 6

Troubleshooting a CORS problem with connecting an Angular application to a Node server that is accessing the Spotify

Troubleshooting Issue: Data not appearing on Angular frontend when fetching from Laravel API

Upon executing the `npm start` command, the application experiences a crash

How do I increase a date by a specific number of days in Ionic 3?