1 | import { Component, OnInit, Inject, AfterViewInit } from '@angular/core';
|
---|
2 | import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
---|
3 | import { IPharmacy } from '../../shared/interfaces';
|
---|
4 | import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
|
---|
5 | import { HttpClient } from '@angular/common/http';
|
---|
6 |
|
---|
7 | @Component({
|
---|
8 | selector: 'app-pharmacy-dialog',
|
---|
9 | templateUrl: './pharmacy-dialog.component.html',
|
---|
10 | styleUrls: ['./pharmacy-dialog.component.css']
|
---|
11 | })
|
---|
12 | export class PharmacyDialogComponent implements OnInit {
|
---|
13 | pharmacy: IPharmacy;
|
---|
14 | mapShown: boolean = true;
|
---|
15 | options = {
|
---|
16 | layers: [
|
---|
17 | tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <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<PharmacyDialogComponent>, @Inject(MAT_DIALOG_DATA) data, private http: HttpClient) {
|
---|
24 | this.pharmacy = data;
|
---|
25 | if(this.pharmacy) {
|
---|
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.pharmacy?.location+'&street='+this.pharmacy?.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/pharmacy-icon.png'
|
---|
42 | })
|
---|
43 | }).bindPopup("Аптека: "+this.pharmacy?.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 | close() {
|
---|
54 | this.dialogRef.close();
|
---|
55 | }
|
---|
56 |
|
---|
57 |
|
---|
58 | } |
---|