Changeset 28d7d35 for Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog/pharmacy-dialog.component.ts

Timestamp:

01/31/21 06:27:26 (4 years ago)

Author:

Mile Jankuloski <mile.jankuloski@…>

Branches:

master

Children:

de9d697

Parents:

7520f88

Message:

Maps, geolocation api, dialogs & more

File:

• Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog/pharmacy-dialog.component.ts (modified) (3 diffs)

Farmatiko/ClientApp/src/app/dialogs/pharmacy-dialog/pharmacy-dialog.component.ts

@@ -1 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, AfterViewInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { IPharmacy } from '../../shared/interfaces';
+import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
@@ -10 +12 @@
 export class PharmacyDialogComponent implements OnInit {
   pharmacy: IPharmacy;
+  mapShown: boolean = true;
+  options = {
+    layers: [
+      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' })
+    ],
+    zoom: 7,
+    center: latLng(41.61807, 21.74348)
+  }
 
-  constructor(private dialogRef: MatDialogRef<PharmacyDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
+  constructor(private dialogRef: MatDialogRef<PharmacyDialogComponent>, @Inject(MAT_DIALOG_DATA) data, private http: HttpClient) {
     this.pharmacy = data;
+    if(this.pharmacy) {
+      this.addMarkers();
+    }
   }
 
   ngOnInit(): void {
+  }
+
+  addMarkers() {
+    this.http.get<any>('https://nominatim.openstreetmap.org/search/?country=Macedonia&city='+this.pharmacy?.location+'&street='+this.pharmacy?.address+'&format=json').subscribe(obj => {
+      console.log(obj);  
+      if(obj.length) {
+          let layer = marker([ obj[0]?.lat, obj[0]?.lon ], {
+            icon: icon({
+              iconSize: [ 25, 41 ],
+              iconAnchor: [ 13, 41 ],
+              iconUrl: 'assets/pharmacy-icon.png'
+            })
+          }).bindPopup("Аптека: "+this.pharmacy?.name);
+          this.options.layers.push(layer);
+          this.options.center = latLng(obj[0]?.lat, obj[0]?.lon);
+          this.options.zoom = 13;
+        }
+      }, error => console.error(error));
+      this.mapShown = false;
+      setTimeout(() => this.mapShown = true, 300);
   }
 
@@ -22 +55 @@
   }
 
+
 }