Ignore:
Timestamp:
01/31/21 06:27:26 (23 months ago)
Author:
Mile Jankuloski <mile.jankuloski@…>
Branches:
master
Children:
de9d697
Parents:
7520f88
Message:

Maps, geolocation api, dialogs & more

File:
1 edited

Legend:

Unmodified
Added
Removed
  • Farmatiko/ClientApp/src/app/home/home.component.ts

    r7520f88 r28d7d35  
    55import { MedicineDialogComponent } from '../dialogs/medicine-dialog/medicine-dialog.component';
    66import { PharmacyDialogComponent } from '../dialogs/pharmacy-dialog/pharmacy-dialog.component';
     7import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
     8import { HttpClient } from '@angular/common/http';
    79
    810@Component({
     
    1618  public filteredMedicines: IMedicine[] = [];
    1719  public filteredPharmacies: IPharmacy[] = [];
     20  public lat;
     21  public lng;
     22  clicked = false;
     23  showMap: boolean = false;
     24  options = {
     25    layers: [
     26      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' })
     27    ],
     28    zoom: 8,
     29    center: latLng(41.61807, 21.74348)
     30  }
    1831
    19   constructor(private dataService: DataService, private dialog: MatDialog) {
     32  constructor(private dataService: DataService, private dialog: MatDialog, private http: HttpClient) {
    2033
    2134  }
     
    3447        },
    3548        (err: any) => console.log(err),
    36         () => console.log('Pharmacy data retrieved'));
     49        () => {
     50          this.appendPharmacyMarkers(this.pharmacies);
     51          console.log('Pharmacy data retrieved');
     52        });
     53    if (navigator.geolocation) {
     54      navigator.geolocation.getCurrentPosition((position) => {
     55        if (position) {
     56          this.lat = position.coords.latitude;
     57          this.lng = position.coords.longitude;
     58          let layer = marker([ this.lat, this.lng ], {
     59            icon: icon({
     60              iconSize: [ 25, 41 ],
     61              iconAnchor: [ 13, 41 ],
     62              iconUrl: 'assets/home-icon.png'
     63            })
     64          }).bindPopup("Вашата локација");
     65          this.options.layers.push(layer);
     66        }
     67      });
     68    }
    3769  }
     70
     71  appendPharmacyMarkers(pharmas: IPharmacy[]) {
     72    this.options.layers = [];
     73    this.options.layers.push(tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}));
     74    if(this.lat && this.lng) {
     75      this.options.layers.push(marker([ this.lat, this.lng ], {
     76        icon: icon({
     77          iconSize: [ 25, 41 ],
     78          iconAnchor: [ 13, 41 ],
     79          iconUrl: 'assets/home-icon.png'
     80        })
     81      }).bindPopup("Вашата локација"));
     82    }
     83    pharmas.forEach((pharmacy) => {
     84      this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+pharmacy.location+'&street='+pharmacy.address+'&format=json').subscribe(obj => {
     85        console.log(obj); 
     86        if(obj.length) {
     87            let layer = marker([ obj[0]?.lat, obj[0]?.lon ], {
     88              icon: icon({
     89                iconSize: [ 25, 41 ],
     90                iconAnchor: [ 13, 41 ],
     91                iconUrl: 'assets/pharmacy-icon.png'
     92              })
     93            }).bindPopup("Аптека: "+pharmacy.name);
     94            this.options.layers.push(layer);
     95          }
     96        }, error => console.error(error));
     97    });
     98  }
     99
    38100
    39101  applyFilterMedicines(filterValue: string) {
     
    60122          },
    61123          (err: any) => console.log(err),
    62           () => console.log('Pharmacy data retrieved'));
     124          () => {
     125            this.appendPharmacyMarkers(this.filteredPharmacies);
     126            if(this.showMap) {
     127              this.showMap = false;
     128              setTimeout(() => this.showMap = true, 300);
     129            }
     130            console.log('Pharmacy data retrieved')
     131        });
    63132    }
    64133    else {
    65134      this.filteredPharmacies = this.pharmacies;
     135      this.appendPharmacyMarkers(this.pharmacies);
     136      if(this.showMap) {
     137        this.showMap = false;
     138        setTimeout(() => this.showMap = true, 300);
     139      }
    66140    }
    67141  }
     
    80154    });
    81155  }
     156
     157  toggleMap() {
     158    this.showMap = !this.showMap;
     159  }
     160
     161  refreshMap() {
     162    this.showMap = false;
     163    setTimeout(() => this.showMap = true, 300);
     164  }
     165
    82166}
Note: See TracChangeset for help on using the changeset viewer.