Leveraging latitude and longitude data from an API to create circles on the AGM platform

Question

Leveraging latitude and longitude data from an API to create circles on the AGM platform

I need assistance with utilizing location data from recent earthquake events to center a circle on Angular Google Maps. Can anyone provide guidance on how to achieve this?

The API call provides the following data:

0:
--geometry:
   ---coordinates: Array(3)
       ----0: (Latitude)
       ----1: (Longitude)
       ----2: (additional numbers)
    ---length: 3
-- id
--properties
--type

I have attempted the following approaches:

*ngFor="let eqdata of data" [latitude]="eqdata.geometry.coordinates.0" [longitude]="eqdata.geometry.coordinates.1"

 &

*ngFor="let eqdata of data" [latitude]="eqdata.geometry.coordinates[0]" [longitude]="eqdata.geometry.coordinates[1]"

Could it be a syntax issue? Any help would be greatly appreciated as I am new to Ionic!

Edit: The complete Data Structure from the API has been added.

Edit: Here is the link to the data Structure: https://i.stack.imgur.com/vW6Fr.jpg

angular typescript ionic4 angular-google-maps

Answer 1

Answer №1

It appears that you may have posted the same query twice with varied details in each?

The async pipe serves the purpose of managing the subscription and unsubscription process when working with observables.

However, judging by the code provided in the alternate version of this post, it seems that your situation is different.

Your code from the other question contains a bug because proper unsubscribing is necessary.

In order to utilize the | async pipe effectively, ensure that you pass the observable before calling .subscribe().

To achieve this, you will need to prepare your data using rxjs pipe + map (or switchMap).

Referencing this answer can guide you on how to manipulate data within an observable without directly subscribing to it for subsequent use with an async pipe.

My assistance may be limited as this topic is complex and experimenting with actual code would be more beneficial for understanding and problem-solving.

If possible, please provide clarity on whether the shared screenshot depicts the raw API response or the modified this.data, as the following snippet:

if (this.earthquake_status && this.earthquake_status.length)  {
  for(let i=0; i< this.earthquake_status.length; i++){
    this.data = res[0].features;
  }
}

Suggests potential data manipulation issues rather than matching the displayed example.

Is the API publicly accessible?

Answer 2