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/dialogs/pharmacy-dialog/pharmacy-dialog.component.ts

    r7520f88 r28d7d35  
    1 import { Component, OnInit, Inject } from '@angular/core';
     1import { Component, OnInit, Inject, AfterViewInit } from '@angular/core';
    22import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
    33import { IPharmacy } from '../../shared/interfaces';
     4import { latLng, LatLng, tileLayer, marker, icon } from 'leaflet';
     5import { HttpClient } from '@angular/common/http';
    46
    57@Component({
     
    1012export class PharmacyDialogComponent implements OnInit {
    1113  pharmacy: IPharmacy;
     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  }
    1222
    13   constructor(private dialogRef: MatDialogRef<PharmacyDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
     23  constructor(private dialogRef: MatDialogRef<PharmacyDialogComponent>, @Inject(MAT_DIALOG_DATA) data, private http: HttpClient) {
    1424    this.pharmacy = data;
     25    if(this.pharmacy) {
     26      this.addMarkers();
     27    }
    1528  }
    1629
    1730  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);
    1851  }
    1952
     
    2255  }
    2356
     57
    2458}
Note: See TracChangeset for help on using the changeset viewer.