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 = [ { lat: 54.0466, lng: -2.8007, label: 'A', }, { lat: 54.0453, lng: -2.83, label: 'B' }, { lat: 54.0563, lng: -2.8279, label: 'C' } ] 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_lat: resp.getNorthEast().lat(), north_east_lng: resp.getNorthEast().lng(), south_west_lat: resp.getSouthWest().lat(), south_west_lng: resp.getSouthWest().lng() }; this.api.getMapData(mapData).subscribe( result => { this.dataReceived = 'yes'; }, error => { // this.dataReceived = 'no'; console.log('Retrieval Error'); console.log( error._body ); } ); } }