Ignore:
Timestamp:
01/31/21 06:27:26 (22 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/counter/counter.component.ts

    r7520f88 r28d7d35  
    55import { FacilityDialogComponent } from '../dialogs/facility-dialog/facility-dialog.component';
    66import { WorkerDialogComponent } from '../dialogs/worker-dialog/worker-dialog.component';
     7import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
     8import { HttpClient } from '@angular/common/http';
    79
    810@Component({
     
    1618  public filteredFacilities: IHealthFacilities[] = [];
    1719  public filteredWorkers: IHealthcareWorkers[] = [];
    18 
    19   constructor(private dataService: DataService, private dialog: MatDialog) {
     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  }
     31 
     32  constructor(private dataService: DataService, private dialog: MatDialog, private http: HttpClient) {
    2033   
    2134  }
     
    2740        },
    2841        (err: any) => console.log(err),
    29         () => console.log('Facility data retrieved!'));
     42        () => {
     43          this.appendFacilityMarkers(this.facilities)
     44          console.log('Facility data retrieved!');
     45        });
    3046
    3147    this.dataService.getWorkers()
     
    3551        (err: any) => console.log(err),
    3652        () => console.log('Facility data retrieved!'));
     53
     54    if (navigator.geolocation) {
     55      navigator.geolocation.getCurrentPosition((position) => {
     56        if (position) {
     57          this.lat = position.coords.latitude;
     58          this.lng = position.coords.longitude;
     59          let layer = marker([ this.lat, this.lng ], {
     60            icon: icon({
     61              iconSize: [ 25, 41 ],
     62              iconAnchor: [ 13, 41 ],
     63              iconUrl: 'assets/home-icon.png'
     64            })
     65          }).bindPopup("Вашата локација");
     66          this.options.layers.push(layer);
     67        }
     68      });
     69    }
     70  }
     71
     72  appendFacilityMarkers(facils: IHealthFacilities[]) {
     73    this.options.layers = [];
     74    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'}));
     75    if(this.lat && this.lng) {
     76      this.options.layers.push(marker([ this.lat, this.lng ], {
     77        icon: icon({
     78          iconSize: [ 25, 41 ],
     79          iconAnchor: [ 13, 41 ],
     80          iconUrl: 'assets/home-icon.png'
     81        })
     82      }).bindPopup("Вашата локација"));
     83    }
     84    facils.forEach((facil) => {
     85      this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+facil.municipality+'&street='+facil.address+'&format=json').subscribe(obj => {
     86        console.log(obj); 
     87        if(obj.length) {
     88            let layer = marker([ obj[0]?.lat, obj[0]?.lon ], {
     89              icon: icon({
     90                iconSize: [ 25, 41 ],
     91                iconAnchor: [ 13, 41 ],
     92                iconUrl: 'assets/hospital-icon.png'
     93              })
     94            }).bindPopup(facil.name);
     95            this.options.layers.push(layer);
     96          }
     97        }, error => console.error(error));
     98    });
    3799  }
    38100
     
    45107          },
    46108          (err: any) => console.log(err),
    47           () => console.log('Facility data retrieved!'));
     109          () => {
     110            this.appendFacilityMarkers(this.filteredFacilities);
     111            if(this.showMap) {
     112              this.showMap = false;
     113              setTimeout(() => this.showMap = true, 300);
     114            }
     115            console.log('Facility data retrieved!');
     116          });
    48117    }
    49118    else {
    50119      this.filteredFacilities = this.facilities;
     120      this.appendFacilityMarkers(this.facilities);
     121      if(this.showMap) {
     122        this.showMap = false;
     123        setTimeout(() => this.showMap = true, 300);
     124      }
    51125    }
    52126  }
     
    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.