FoodLoop-Web/src/app/dashboard/map.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service';
import { AgmCoreModule } from '@agm/core';
import 'rxjs/add/operator/map';

@Component({
  templateUrl: 'map.component.html',
})
export class MapComponent implements OnInit {

  lat: number = 54.0466;
  lng: number = -2.8007;
  zoom: number = 12;

  dataReceived: string = 'yes';

  markers: Array<{latitude: number, longitude: number, name: string}>;

  map: any;

  constructor(
    private http: Http,
    private api: ApiService,
  ) { }

  ngOnInit(): void { }

  public onMapReady(map: any) {
    this.map = map;
  }

  public viewBoundsChanged() {
    console.log("finding bounds");
    const resp = this.map.getBounds();
    console.log("found bounds");
    console.log(resp.getNorthEast().lat());
    console.log(resp.getNorthEast().lng());
    console.log(resp.getSouthWest().lat());
    console.log(resp.getSouthWest().lng());
    const mapData = {
      north_east: {
        latitude:  resp.getNorthEast().lat(),
        longitude: resp.getNorthEast().lng()
      },
      south_west: {
        latitude:  resp.getSouthWest().lat(),
        longitude: resp.getSouthWest().lng()
      },
    }
    this.api.getMapData(mapData).subscribe(
      result => {
        this.dataReceived = 'yes';
        this.markers = result.suppliers;
      },
      error => {
        // this.dataReceived = 'no';
        console.log('Retrieval Error');
        console.log( error._body );
      }
    );
  }



}