FatboarProject/angular-client/src/app/components/shared/contact/map/map.component.ts

import { Component, OnInit, Inject, PLATFORM_ID, AfterViewInit } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Restaurant } from './../../../../models/restaurant';
import { RestaurantsService } from 'src/app/services/restaurants.service';
import { LeafletService } from 'src/app/services/leaflet.service';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewInit {
  private L: any;
  private macarte: any;

  constructor(
    private restaurantsService: RestaurantsService,
    private leafletService: LeafletService,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.L = this.leafletService.getLeaflet();
    }
  }

  ngAfterViewInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.initMap();

      // Corriger le découpage de la carte après affichage
      setTimeout(() => {
        this.macarte.invalidateSize();
      }, 500);
    }
  }

  private initMap(): void {
    if (!this.L) return;

    this.macarte = this.L.map('frugalmap').setView([48.85513, 2.353429], 9);

    // Utiliser HTTPS pour éviter les erreurs Mixed Content
    this.L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: 'FatBoar',
    }).addTo(this.macarte);

    const myIcon = this.L.icon({
      iconUrl: 'assets/img/marker/markericon.png',
      iconSize: [38, 38],
      iconAnchor: [19, 38],
    });

    this.restaurantsService.getRestaurants().subscribe((data: any) => {
      data.forEach((res: Restaurant) => {
        const marker = this.L.marker([res.latitude, res.longitude], { icon: myIcon }).addTo(this.macarte);

        marker.bindPopup(
          `<h5 style="text-align: center"><b>${res.name}</b></h5><b>Adresse :</b> ${res.adress}`,
          { maxWidth: 130, minWidth: 120 }
        );
      });
    });
  }
}