Using Lat and Long from API to AGM Circles

Question

I have a service that will give me Locations of recent earthquake events. I want to use the said Lat&Long as the center of a circle in Angular Google Maps. How do I do this?

These are the data from the API call:

0:
--geometry:
   ---coordinates: Array(3)
       ----0: (Lat here)
       ----1: (Long here)
       ----2: (additional numbers here)
    ---length: 3
-- id
--propertries
--type  `

I have tried these:

*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]"

Is the syntax wrong? I am new to ionic and would really appreciate any kind of help!

Edit: added the full Data Structure from the API

Edit: Link for data Structure: https://i.stack.imgur.com/vW6Fr.jpg

Answer 1

OK it seems you have the same question running twice with slightly different information in both?

The async pipe is so that you can pass an observable and it will handle the subscribing and unsubscribing for you.

Based on the code you have in the other version of this question that's not your scenario.

Your other questions code has a bug because you need to unsubscribe.

To make this work with the | async pipe though, what you need to do is pass the observable in, before you .subscribe().

For that to work you need to prep your data beforehand using rxjs pipe + map (or switchMap).

For example this answer shows how to change the data in the observable without subscribing to it, so that it could be passed to an async pipe after.

That pretty much comes to the limit of what I can help with though because it's complicated for me and I couldn't write the code unless I had a demo to play around with and figure it out through trial and improvement.

I'm not entirely sure if you have described your code accurately. The screenshot you have shared: is that a screenshot of what the api is returning, or a screenshot of this.data after you have transformed it? Because this:

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

Looks like it destroys your data not outputs the example you have given us a screenshot.

Is this api public?