source: Farmatiko/ClientApp/src/app/dialogs/facility-dialog/facility-dialog.component.ts@ 28d7d35

Last change on this file since 28d7d35 was 28d7d35, checked in by Mile Jankuloski <mile.jankuloski@…>, 4 years ago

Maps, geolocation api, dialogs & more

  • Property mode set to 100644
File size: 1.9 KB
Line 
1import { Component, OnInit, Inject } from '@angular/core';
2import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
3import { IHealthFacilities } from '../../shared/interfaces';
4import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
5import { HttpClient } from '@angular/common/http';
6
7@Component({
8 selector: 'app-facility-dialog',
9 templateUrl: './facility-dialog.component.html',
10 styleUrls: ['./facility-dialog.component.css']
11})
12export class FacilityDialogComponent implements OnInit {
13 facility: IHealthFacilities;
14 mapShown: boolean = true;
15 options = {
16 layers: [
17 tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' })
18 ],
19 zoom: 7,
20 center: latLng(41.61807, 21.74348)
21 }
22
23 constructor(private dialogRef: MatDialogRef<FacilityDialogComponent>, @Inject(MAT_DIALOG_DATA) data, private http: HttpClient) {
24 this.facility = data;
25 if(this.facility) {
26 this.addMarkers();
27 }
28 }
29
30 ngOnInit(): void {
31 }
32
33 addMarkers() {
34 this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+this.facility?.municipality+'&street='+this.facility?.address+'&format=json').subscribe(obj => {
35 console.log(obj);
36 if(obj.length) {
37 let layer = marker([ obj[0]?.lat, obj[0]?.lon ], {
38 icon: icon({
39 iconSize: [ 25, 41 ],
40 iconAnchor: [ 13, 41 ],
41 iconUrl: 'assets/hospital-icon.png'
42 })
43 }).bindPopup("Аптека: "+this.facility?.name);
44 this.options.layers.push(layer);
45 this.options.center = latLng(obj[0]?.lat, obj[0]?.lon);
46 this.options.zoom = 13;
47 }
48 }, error => console.error(error));
49 this.mapShown = false;
50 setTimeout(() => this.mapShown = true, 300);
51 }
52
53
54 close() {
55 this.dialogRef.close();
56 }
57
58}
Note: See TracBrowser for help on using the repository browser.