diff --git a/src/app/components/add-pin-popup/add-pin-popup.component.ts b/src/app/components/add-pin-popup/add-pin-popup.component.ts index 9e30b2f..6f00c7f 100644 --- a/src/app/components/add-pin-popup/add-pin-popup.component.ts +++ b/src/app/components/add-pin-popup/add-pin-popup.component.ts @@ -99,7 +99,7 @@ export class AddPinPopupComponent implements OnInit { files: this.files, }; - this.addPinService.addPin(pinData).add(() => { + this.addPinService.addPin(pinData).subscribe(() => { this.closeModal(); }); } else { diff --git a/src/app/components/leaflet-map/leaflet-map.component.ts b/src/app/components/leaflet-map/leaflet-map.component.ts index 4c0dd38..0cbd195 100644 --- a/src/app/components/leaflet-map/leaflet-map.component.ts +++ b/src/app/components/leaflet-map/leaflet-map.component.ts @@ -1,7 +1,8 @@ import { Component, OnInit, ViewContainerRef } from '@angular/core'; import * as L from 'leaflet'; import 'leaflet/dist/leaflet.css'; -import { monuments } from '../../data/stub'; +import { Monument } from '../../model/Monument'; +import { GetPinService } from '../../services/get-pin.service'; import { MonumentMarkerComponent } from '../monument-marker/monument-marker.component'; @Component({ @@ -11,7 +12,10 @@ import { MonumentMarkerComponent } from '../monument-marker/monument-marker.comp export class LeafletMapComponent implements OnInit { private map!: L.Map; - constructor(private viewContainerRef: ViewContainerRef) {} + constructor( + private viewContainerRef: ViewContainerRef, + private getPinsService: GetPinService + ) {} ngOnInit(): void { this.initializeMap(); @@ -22,7 +26,7 @@ export class LeafletMapComponent implements OnInit { this.map = L.map('map', { maxBounds: L.latLngBounds( L.latLng(-90, -180), // South-West - L.latLng(90, 180) // North-East + L.latLng(90, 180) // North-East ), maxBoundsViscosity: 1.0, // Prevent dragging the map out of bounds minZoom: 2, // Prevent zooming out too much @@ -47,24 +51,28 @@ export class LeafletMapComponent implements OnInit { `); - // Add markers - monuments.forEach((monument) => { - const icon = monument.visited ? visitedIcon : notVisitedIcon; + this.getPinsService.getPins().subscribe((monuments: Monument[]) => { + console.log(monuments); + // Add markers + monuments.forEach((monument: Monument) => { + //const icon = monument.visited ? visitedIcon : notVisitedIcon; + const icon = visitedIcon; - const marker = L.marker(monument.coords as [number, number], { - icon, - }).addTo(this.map); + const marker = L.marker(monument.location as [number, number], { + icon, + }).addTo(this.map); - // Dynamically create Angular component and attach it to popup - const popupDiv = document.createElement('div'); - const componentRef = this.viewContainerRef.createComponent( - MonumentMarkerComponent - ); + // Dynamically create Angular component and attach it to popup + const popupDiv = document.createElement('div'); + const componentRef = this.viewContainerRef.createComponent( + MonumentMarkerComponent + ); - componentRef.instance.monument = monument; - popupDiv.appendChild(componentRef.location.nativeElement); + componentRef.instance.monument = monument; + popupDiv.appendChild(componentRef.location.nativeElement); - marker.bindPopup(popupDiv); + marker.bindPopup(popupDiv); + }); }); } diff --git a/src/app/components/monument-marker/monument-marker.component.html b/src/app/components/monument-marker/monument-marker.component.html index dd4730a..cafdfcb 100644 --- a/src/app/components/monument-marker/monument-marker.component.html +++ b/src/app/components/monument-marker/monument-marker.component.html @@ -1,7 +1,7 @@
- {{ monument.name }} + {{ monument.title }} -
+