Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fixes made and info window usage revamped with modals

Browse source
This commit is contained in:
piratefinn 2017-11-27 16:56:09 +00:00
parent 129f953389
commit 7b897640b5
8 changed files with 146 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/app/dashboard/map.component.ts
View file

@ -1,18 +1,22 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
import { ApiService } from '../providers/api-service';
import { AgmCoreModule } from '@agm/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'map.component.html',
})
export class MapComponent implements OnInit {
export class MapComponent implements OnInit, AfterViewInit {
@ViewChild('statusModal') myStatusModal: ModalDirective;
lat: number = 54.0466;
lng: number = -2.8007;
zoom: number = 12;
public modalRef: BsModalRef;
clickedMarker: any;
dataReceived: string = 'yes';
dataReceived: string = 'loading';
markers: Array<{latitude: number, longitude: number, name: string}>;
@ -20,14 +24,29 @@ export class MapComponent implements OnInit {
constructor(
private api: ApiService,
private modalService: BsModalService,
) { }
ngOnInit(): void { }
ngAfterViewInit() {
this.myStatusModal.show();
}
public onMapReady(map: any) {
this.map = map;
}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
console.log(clickedMarker);
this.clickedMarker = clickedMarker;
this.openModal(template);
}
public viewBoundsChanged() {
console.log("finding bounds");
const resp = this.map.getBounds();
@ -48,7 +67,7 @@ export class MapComponent implements OnInit {
}
this.api.getMapData(mapData).subscribe(
result => {
this.dataReceived = 'yes';
this.myStatusModal.hide();
this.markers = result.suppliers;
},
error => {