0

I got data from an API call, and I want to use the coordinates as a center point of Angular Google Maps' Circle.

TS file:

async getData() {
const loading = await this.loadingController.create({
  message: 'Loading'
});
await loading.present();
this.api.getData()
  .subscribe(res => {
    this.earthquake_status = res;
    if (this.earthquake_status && this.earthquake_status.length)  {
      for(let i=0; i< this.earthquake_status.length; i++){
        this.data = res[0].features;
       }
      }
      console.log(this.data);
      loading.dismiss();
    }, err => {
      console.log(err);
      loading.dismiss();
    });
}

HTML File:

<agm-map
      [zoom]="13"
      [style.height.px]="height"
      [latitude]="lat"
      [longitude]="lng">


 <div *ngFor="let eqdata of data" value="eqdata">
    <agm-circle
        [latitude]="eqdata.geometry.coordinates[0]" 
        [longitude]="eqdata.geometry.coordinates[1]" 
        [radius]="5000"
        [fillColor]="'red'"
        [circleDraggable]="true"
        [editable]="false"> 
    </agm-circle>
</div>

Data from the API:

API Call

I have tried placing the *ngFor inside the AGM-map element, but the map won't load. It is the same when placing the *ngFor inside the agm-circle element. I am new to Ionic and Angular, and I would appreciate any kind of help!

matwr
  • 1,548
  • 1
  • 13
  • 23
Programming Pleb
  • 21
  • 3
  • When you look inside of your browser devtools, are there any console errors? Also, if you inspect your `agm-map` element, do any `agm-circles` get rendered in the DOM (it is possible that they are being rendered but are somehow hidden). – Will Taylor Sep 16 '19 at 08:21
  • There are no errors in the console, also tried printing if the data is present, which it was. Just tried placing static values on the circles, the circle worked. Hope this helps! – Programming Pleb Sep 16 '19 at 08:24

0 Answers0